Vue-resource简述

HTTP请求类型及说明

Web开发最常见的就是HTTP通信协议，该协议涉及的目的就是确保服务器与客户端之间的正确通信，其中最主要的4种方法如下。

1.Http get

主要用于向指定的URL请求资源，可以带参数也可以不带参数，带参数时，参数时明文传递，你可以在浏览器的地址栏看到参数及参数值，get安全性不高，所以常用于安全性要求低的场合，比如登陆后请求数据。

2.Http post

主要是向指定的URL提交数据，通常用于表单发送，post传递的数据或参数不是以明文形式存在的，而是封装后的，因此相对安全系数高，像注册、登录、提交表单都是用该方法实现的。

3.Http put

功能和post相似，用来将信息放到请求的URL上，put方法是幂等方法，post非幂等方法，put在请求时容易造成数据富余，而post不然。

4.Http delete

Http delete方法：用于删除请求URL上的某个资源。该请求返回状态有3种。
1.200：表示删除请求被成功执行，返回被删除的资源
2.202：表示删除请求被接受，但是没有被执行
3.204：表示删除请求被执行，但是没有返回被删除的资源

Vue-resource中的请求使用方法

1.Vue-resource特点

1.体积小，只有12KB
2.支持主流的浏览器
3.支持Promise API和URI Templates
4.支持拦截器

2.基本语法

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

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

// 传统写法
this.$http.get('/someUrl', [options]).then(function(response){
    // 响应成功回调
}, function(response){
    // 响应错误回调
});


// Lambda写法
this.$http.get('/someUrl', [options]).then((response) => {
    // 响应成功回调
}, (response) => {
    // 响应错误回调
});

3.支持的HTTP方法

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

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

一般通过Vue-resource请求服务器得到的数据，在vue模块化开发中，需要传递给vue实例的data属性，假设response.data为请求得到的数据，而user为vue实例的data。
1.如果user定义是字符串，可以直接this.user = response.data；
2.如果user定义是对象，可以使用Object.assgin({},this.user,response.data)；
3.如果user定义是数组，可以使用this.$set('user', response.data)；
==Object.assgin()方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。==
Object.assign(target, ...sources)

5.使用resource服务

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

resource有以下几种默认的action：  
get: {method: 'GET'},  
save: {method: 'POST'},  
query: {method: 'GET'},  
update: {method: 'PUT'},  
remove: {method: 'DELETE'},
delete: {method: 'DELETE'}

getCustomers: function() {

    var resource = this.$resource(this.apiUrl)
        vm = this

    resource.get()
        .then((response) => {
            vm.$set('gridData', response.data)
        })
        .catch(function(response) {
            console.log(response)
        })
}

6.inteceptor

拦截器可以在请求发送前和发送请求后做一些处理。是属于http的属性。

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