Vue中发送HTTP请求

Vue中发送HTTP请求

HTTP库：

vue-resource：https://github.com/pagekit/vue-resource

axios：http://www.axios-js.com/

前言

设置请求的根目录

前言

Vue中并没有直接提供对HTTP请求模块的封装，而是以使用一个单独的插件去封装了HTTP的模块，vue-resource是vue提供的一个插件，除此之外你还可以使用其它的插件比如axios。

<script src="../lib/vue-2.4.0.js"></script>

    <!-- vue-resource依赖于vue,它只是在Vue的this上扩展了$http-->
    <script src="../lib/vue-resource-1.3.4.js"></script>
</head>

<body>
<div id="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo">
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            getInfo() {
                //  这里如果使用webstrom启动访问会报错，因为这是跨源访问，所以
                // 按理说应该是在源网站上访问该页面
                this.$http.get('http://vue.studyit.io/api/getlunbo')
                    .then((success) => {
                        console.log(success);
                    }, (error) => {
                        console.log(error);
                    })
            },
            postInfo() { // 发起 post 请求   application/x-wwww-form-urlencoded
                //  手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
                //  通过 post 方法的第三个参数， { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
                this.$http.post('http://vue.studyit.io/api/post', {}, {})
                    .then(success => {
                        console.log(success);
                    }) // error可以省略
            },
            jsonpInfo() {
                this.$http.jsonp('http://vue.studyit.io/api/jsonp')
                    .then(result => {
                        console.log(result);
                    })
            }
        }
    })
</script>

设置请求的根目录

在vue-resource的文档里有Configuration项，在其中有说明。

// main.js中

// http请求
import VueResource from 'vue-resource'
Vue.use(VueResource)
// 设置全局http请求根路径[最后不带/，在请求时之前也不能带/]
Vue.http.options.root = 'http://vue.studyit.io';

前进时，请别遗忘了身后的脚印。