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';