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 | 响应头 |