vue-resource.js小记-CSDN博客

npm install vue-resource

引入后Vue可以基于全局前对象Vue使用http，也可以基于某个Vue实例使用http：

//基于全局Vue对象使用http
Vue.http.get('/url',[options]).then(successCallback,errorCallback);
Vue.http.post('/url',[body],[options]).then(successCallback,errorCallback);

//在一个Vue实例内使用$http
this.$http.get('/url',[options]).then(successCallback,errorCallback);
this.$http.post('/url',[body],[options]).then(successCallback,errorCallback);

发送请求之后，使用then方法来处理响应结果，第一个参数成功时的回调函数，第二个参数失败时的回调函数。

then的回调函数有两种写法，第一种是传统写法，第二种是更为简洁的ES6的lambda写法：

//传统写法
this.$http.get('/url',[options]).then(function(response){
    //响应成功
},function(response){
    //响应失败
});

//lambda写法
this.$http.get('/url',[options]).then((response)=>{
    //响应成功
},
(response)=>{
    //响应失败
});

vue-resource的请求API是按照REST风格设计的，他提供了7种请求API：

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

出了jsonp以外，；另外6种的API名称是标准的HTTP方法。

options对象包含的属性

参数	类型	描述
url	string	请求的url
method	string	请求的HTTP方法，'GET'、'POST'或其他
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对象

注：v0.9.0以前的版本没有text(),json(),blob()这些方法

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

使用resource服务

vue-resource提供了另一种方式访问HTTP--resource服务，resource服务包含以下几种默认的action：

get: {method: 'GET'}
save: {method: 'POST'}
query: {method: 'GET'}
update: {method: 'PUT'}
remove: {method: 'DELETE'}
delete: {method: 'DELETE'}

resource对象也有两种访问形式

全局访问：Vue.resource
实例访问：this.$resource

resource可以结合URI Template一起使用

apiUrl:'http://localhost/api/customers{/id}'


//eg 使用id
updateCustomer: function() {
    var resource = this.$resource(this.apiUrl)
        vm = this
        
    resource.update({ id: vm.item.customerId}, vm.item)
        .then((response) => {
            vm.getCustomers()
        })
}

//未使用id
updateCustomer: function() {
    var resource = this.$resource(this.apiUrl)
        vm = this
        
    resource.update(vm.apiUrl, vm.item)
        .then((response) => {
            vm.getCustomers()
        })
}

使用interceptor

基本用法

Vue.http.interceptors.push((request, next) => {
        // ...
        // 请求发送前的处理逻辑
        // ...
    next((response) => {
        // ...
        // 请求发送后的处理逻辑
        // ...
        // 根据请求的状态，response参数会返回给successCallback或errorCallback
        return response
    })
})

总结

vue-resource是一个非常轻量的用于处理HTTP请求的插件，它提供了两种方式来处理HTTP请求：