vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应，也就是说，jQuery中ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。此外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。

vue-resource是不是已经不那么陌生了，接下来我们就来看看vue-resouce的具体使用方法：

// 因为vue-resource依赖于vue.js，所以要先引入vue.js
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

引入插件以后，我们再来看看它怎么使用：

// 全局引用 Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback); Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback); // 基于某个Vue实例使用 var vm = new Vue(); vm.$http.get('/someUrl', [options]).then(successCallback, errorCallback); vm.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

可以看到，在发出请求以后，会有一个then对callback进行处理，看到then我们就会想到ES6里面的promise函数，这里确实是在promise的基础上进行封装的。为了方便，我们可以在回调函数中使用箭

头函数，示例如下：

Vue.http.get('/someUrl', [options]).then((response) => {
  // 成功回调函数
}).catch((error) => {
   // 错误回调函数，会在整个请求过程中监听错误
})

vue-resource总共提供了7种请求API，如下所示：

• get(url, [options])
• head(url, [options])
• delete(url, [options])
• jsonp(url, [options])
• post(url, [body], [options])
• put(url, [body], [options])
• patch(url, [body], [options])

值得注意的是API中的options属性，发送请求时的options选项对象包含以下属性：

response对象包含以下属性：