vue-resource使用简介

什么是vue-resource？

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选项对象包含以下属性：

参数	类型	描述
url	string	请求的URL
method	string	请求的HTTP方法，例如：'GET', 'POST'或其他HTTP方法
body	Object, FormData string	request body
params	Object	请求的URL参数对象
headers	Object	request header
timeout	number	单位为毫秒的请求超时时间 (0 表示无超时时间)
before	function(request)	请求发送前的处理函数，类似于jQuery的beforeSend函数
progress	function(event)	ProgressEvent回调处理函数
credentials	boolean	表示跨域请求时是否需要使用凭证
emulateHTTP	boolean	发送PUT, PATCH, DELETE请求时以HTTP POST的方式发送，并设置请求头的X-HTTP-Method-Override
emulateJSON	boolean	将request body以application/x-www-form-urlencoded content type发送（表单形式发送）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

response对象包含以下属性：

方法	类型	描述
text()	string	以string形式返回response body
json()	Object	以JSON对象形式返回response body
blob()	Blob	以二进制形式返回response body
属性	类型	描述
ok	boolean	响应的HTTP状态码在200~299之间时，该属性为true
status	number	响应的HTTP状态码
statusText	string	响应的状态文本
headers	Object	响应头