Vue基础知识之vue-resource和axios（三）

vue-resource

Vue.js是数据驱动的，这使得我们并不需要直接操作DOM，如果我们不需要使用jQuery的DOM选择器，就没有必要引入jQuery。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。

vue-resource特点

vue-resource插件具有以下特点：

1. 体积小
   vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。
2. 支持主流的浏览器
   和Vue.js一样，vue-resource除了不支持IE 9以下的浏览器，其他主流的浏览器都支持。
3. 支持Promise API和URI Templates
   Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
   URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。
4. 支持拦截器
   拦截器是全局的，拦截器可以在请求发送前和发送请求后做一些处理。
   拦截器在一些场景下会非常有用，比如请求发送前在headers中设置access_token，或者在请求失败时，提供共通的处理方式。

vue-resource使用

1、引入vue-resource

<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

2、引入vue-resource后，可以基于全局的Vue对象使用http，也可以基于某个Vue实例使用http。

// 基于全局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);

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。
then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：

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

支持的HTTP方法

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, [body], [options])

除了jsonp以外，另外6种的API名称是标准的HTTP方法。当服务端使用REST API时，客户端的编码风格和服务端的编码风格近乎一致，这可以减少前端和后端开发人员的沟通成本。

客户端请求方法	服务端处理方法
this.$http.get(...)	Getxxx
this.$http.post(...)	Postxxx
this.$http.put(...)	Putxxx
this.$http.delete(...)	Deletexxx

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发送

emulateHTTP的作用

如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求，你可以启用enulateHTTP现象。启用该选项后，请求会以普通的POST方法发出，并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。
Vue.http.options.emulateHTTP = true;

emulateJSON的作用

如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。
Vue.http.options.emulateJSON = true;

response对象

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

CURD实例

1、GET请求

var demo = new Vue({
  el: '#app',
  data: {
    gridColumns: ['customerId', 'companyName', 'contactName', 'phone'],
    gridData: [],
    apiUrl: 'http://211.149.193.19:8080/api/customers'
  },
  ready: function() {
    this.getCustomers()
  },
  methods: {
    getCustomers: function() {
      this.$http.get(this.apiUrl)
        .then((response) => {
          this.$set('gridData', response.data)
        })
        .catch(function(response) {
          console.log(response)
        })
    }
  }
})

这段程序的then方法只提供了successCallback，而省略了errorCallback。
catch方法用于捕捉程序的异常，catch方法和errorCallback是不同的，errorCallback只在响应失败时调用，而catch则是在整个请求到响应过程中，只要程序出错了就会被调用。
在then方法的回调函数内，你也可以直接使用this，this仍然是指向Vue实例的：

getCustomers: function() {
  this.$http.get(this.apiUrl)
    .then((response) => {
      this.$set('gridData', response.data)
    })
    .catch(function(response) {
      console.log(response)
    })
}

2、JSONP请求

getCustomers: function() {
  this.$http.jsonp(this.apiUrl).then(function(response){
    this.$set('gridData', response.data)
  })
}

3、POST请求

var demo = new Vue({
  el: '#app',
  data: {
    show: false,
    gridColumns: [{
      name: 'customerId',
      isKey: true
    }, {
      name: 'companyName'
    }, {
      name: 'contactName'
    }, {
      name: 'phone'
    }],
    gridData: [],
    apiUrl: 'http://211.149.193.19:8080/api/customers',
    item: {}
  },
  ready: function() {
    this.getCustomers()
  },
  methods: {
    closeDialog: function() {
      this.show = false
    },
    getCustomers: function() {
      var vm = this
      vm.$http.get(vm.apiUrl)
        .then((response) => {
          vm.$set('gridData', response.data)
        })
    },
    createCustomer: function() {
      var vm = this
      vm.$http.post(vm.apiUrl, vm.item)
        .then((response) => {
          vm.$set('item', {})
          vm.getCustomers()
        })
      this.show = false
    }
  }
})

4、PUT请求

updateCustomer: function() {
  var vm = this
  vm.$http.put(this.apiUrl + '/' + vm.item.customerId, vm.item)
    .then((response) => {
      vm.getCustomers()
    })
}

5、Delete请求

deleteCustomer: function(customer){
  var vm = this
  vm.$http.delete(this.apiUrl + '/' + customer.customerId)
    .then((response) => {
      vm.getCustomers()
    })
}

vue-resource是一个非常轻量的用于处理HTTP请求的插件，它提供了两种方式来处理HTTP请求：
1、使用Vue.http或this.$http
2、使用Vue.resource或this.$resource

data(){
    return{
      toplist:[],
      alllist:[]
    }
  },
  //vue-router
  route:{
    data({to}){
      //并发请求，利用 Promise 
      return Promise.all([
        //简写
        this.$http.get('http://192.168.30.235:9999/rest/knowledge/list',{'websiteId':2,'pageSize':5,'pageNo':1,'isTop':1}),
        //this.$http.get('http://192.168.30.235:9999/rest/knowledge/list',{'websiteId':2,'pageSize':20,'pageNo':1,'isTop':0})
        //不简写
        this.$http({
          method:'GET',
          url:'http://192.168.30.235:9999/rest/knowledge/list',
          data:{'websiteId':2,'pageSize':20,'pageNo':1,'isTop':0},
          headers: {"X-Requested-With": "XMLHttpRequest"},
          emulateJSON: true
          })
        ]).then(function(data){//es5写法
           return{
            toplist:data[0].data.knowledgeList,
            alllist:data[1].data.knowledgeList
          }
        //es6写法 .then()部分
        //.then(([toplist,alllist])=>({toplist,alllist})) 
      },function(error){
        //error
      })
    }
  }

vue axios

vue2.0之后，就不再对vue-resource更新，而是推荐使用axios。基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用。

• 功能特性
  1、在浏览器中发送 XMLHttpRequests 请求
  2、在 node.js 中发送 http请求
  3、支持 Promise API
  4、拦截请求和响应
  5、转换请求和响应数据
  6、取消请求
  7、自动转换 JSON 数据
  8、客户端支持保护安全免受 CSRF/XSRF 攻击
• 安装 axios
  $ npm install axios
• 在要使用的文件中引入axios
  import axios from 'axios'
• GET请求

// 向具有指定ID的用户发出请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
 
// 也可以通过 params 对象传递参数
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

• POST请求

axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

• 执行多个并发请求

function getUserAccount() {
return axios.get('/user/12345');
}
 
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
 
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
//两个请求现已完成
}));

• axios API：可以通过将相关配置传递给 axios 来进行请求。

axios(config)
// 发送一个 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});

axios(url[, config])
// 发送一个 GET 请求 (GET请求是默认请求模式)
axios('/user/12345');

请求方法别名：

为了方便起见，已经为所有支持的请求方法提供了别名。
axios.request（config）
axios.get（url [，config]）
axios.delete（url [，config]）
axios.head（url [，config]）
axios.post（url [，data [，config]]）
axios.put（url [，data [，config]]）
axios.patch（url [，data [，config]]）
注意:当使用别名方法时，不需要在config中指定url，method和data属性。

• 并发
  帮助函数处理并发请求。
  axios.all（iterable）
  axios.spread（callback）
• 创建实例
  也可以使用自定义配置创建axios的新实例。
  axios.create（[config]）

var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});

• 实例方法
  可用的实例方法如下所示。 指定的配置将与实例配置合并。

axios＃request（config）
axios＃get（url [，config]）
axios＃delete（url [，config]）
axios＃head（url [，config]）
axios＃post（url [，data [，config]]）
axios＃put（url [，data [，config]]）
axios＃patch（url [，data [，config]]）

• 请求配置
  这些是用于发出请求的可用配置选项。 只有url是必需的。 如果未指定方法，请求将默认为GET。

{
// `url`是将用于请求的服务器URL
url: '/user',
 
// `method`是发出请求时使用的请求方法
method: 'get', // 默认
 
// `baseURL`将被添加到`url`前面，除非`url`是绝对的。
// 可以方便地为 axios 的实例设置`baseURL`，以便将相对 URL 传递给该实例的方法。
baseURL: 'https://some-domain.com/api/',
 
// `transformRequest`允许在请求数据发送到服务器之前对其进行更改
// 这只适用于请求方法'PUT'，'POST'和'PATCH'
// 数组中的最后一个函数必须返回一个字符串，一个 ArrayBuffer或一个 Stream
 
transformRequest: [function (data) {
// 做任何你想要的数据转换
 
return data;
}],
 
// `transformResponse`允许在 then / catch之前对响应数据进行更改
transformResponse: [function (data) {
// Do whatever you want to transform the data
 
return data;
}],
 
// `headers`是要发送的自定义 headers
headers: {'X-Requested-With': 'XMLHttpRequest'},
 
// `params`是要与请求一起发送的URL参数
// 必须是纯对象或URLSearchParams对象
params: {
ID: 12345
},
 
// `paramsSerializer`是一个可选的函数，负责序列化`params`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
 
// `data`是要作为请求主体发送的数据
// 仅适用于请求方法“PUT”，“POST”和“PATCH”
// 当没有设置`transformRequest`时，必须是以下类型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream
data: {
firstName: 'Fred'
},
 
// `timeout`指定请求超时之前的毫秒数。
// 如果请求的时间超过'timeout'，请求将被中止。
timeout: 1000,
 
// `withCredentials`指示是否跨站点访问控制请求
// should be made using credentials
withCredentials: false, // default
 
// `adapter'允许自定义处理请求，这使得测试更容易。
// 返回一个promise并提供一个有效的响应（参见[response docs]（＃response-api））
adapter: function (config) {
/* ... */
},
 
// `auth'表示应该使用 HTTP 基本认证，并提供凭据。
// 这将设置一个`Authorization'头，覆盖任何现有的`Authorization'自定义头，使用`headers`设置。
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
 
// “responseType”表示服务器将响应的数据类型
// 包括 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
 
//`xsrfCookieName`是要用作 xsrf 令牌的值的cookie的名称
xsrfCookieName: 'XSRF-TOKEN', // default
 
// `xsrfHeaderName`是携带xsrf令牌值的http头的名称
xsrfHeaderName: 'X-XSRF-TOKEN', // default
 
// `onUploadProgress`允许处理上传的进度事件
onUploadProgress: function (progressEvent) {
// 使用本地 progress 事件做任何你想要做的
},
 
// `onDownloadProgress`允许处理下载的进度事件
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
 
// `maxContentLength`定义允许的http响应内容的最大大小
maxContentLength: 2000,
 
// `validateStatus`定义是否解析或拒绝给定的promise
// HTTP响应状态码。如果`validateStatus`返回`true`（或被设置为`null` promise将被解析;否则，promise将被
  // 拒绝。
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
 
// `maxRedirects`定义在node.js中要遵循的重定向的最大数量。
// 如果设置为0，则不会遵循重定向。
maxRedirects: 5, // 默认
 
// `httpAgent`和`httpsAgent`用于定义在node.js中分别执行http和https请求时使用的自定义代理。
// 允许配置类似`keepAlive`的选项，
// 默认情况下不启用。
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
 
// 'proxy'定义代理服务器的主机名和端口
// `auth`表示HTTP Basic auth应该用于连接到代理，并提供credentials。
// 这将设置一个`Proxy-Authorization` header，覆盖任何使用`headers`设置的现有的`Proxy-Authorization` 自定义 headers。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
 
// “cancelToken”指定可用于取消请求的取消令牌
// (see Cancellation section below for details)
cancelToken: new CancelToken(function (cancel) {
})
}

使用 then 时，将收到如下响应：

axios.get('/user/12345')
.then(function(response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
});

• 配置默认值

1、全局axios默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2、自定义实例默认值

//在创建实例时设置配置默认值
var instance = axios.create（{
   baseURL：'https://api.example.com'
}）;
//在实例创建后改变默认值
instance.defaults.headers.common ['Authorization'] = AUTH_TOKEN;

3、配置优先级顺序
配置将与优先顺序合并。 顺序是lib / defaults.js中的库默认值，然后是实例的defaults属性，最后是请求的config参数。 后者将优先于前者。 这里有一个例子。

//使用库提供的配置默认值创建实例
//此时，超时配置值为`0`，这是库的默认值
var instance = axios.create（）;
 
//覆盖库的超时默认值
//现在所有请求将在超时前等待2.5秒
instance.defaults.timeout = 2500;
 
//覆盖此请求的超时，因为它知道需要很长时间
instance.get（'/ longRequest'，{
   timeout：5000
}）;

• 拦截器
  你可以截取请求或响应在被 then 或者 catch 处理之前

//添加请求拦截器
axios.interceptors.request.use（function（config）{
     //在发送请求之前做某事
     return config;
   }，function（error）{
     //请求错误时做些事
     return Promise.reject（error）;
   }）;
 
//添加响应拦截器
axios.interceptors.response.use（function（response）{
     //对响应数据做些事
     return response;
   }，function（error）{
     //请求错误时做些事
     return Promise.reject（error）;
   }）;

如果你以后可能需要删除拦截器。

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

你可以将拦截器添加到axios的自定义实例。

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

• 处理错误

axios.get（'/ user / 12345'）
   .catch（function（error）{
     if（error.response）{
       //请求已发出，但服务器使用状态代码进行响应
       //落在2xx的范围之外
       console.log（error.response.data）;
       console.log（error.response.status）;
       console.log（error.response.headers）;
     } else {
       //在设置触发错误的请求时发生了错误
       console.log（'Error'，error.message）;
     }}
     console.log（error.config）;
   }）;

您可以使用validateStatus配置选项定义自定义HTTP状态码错误范围。

axios.get（'/ user / 12345'，{
   validateStatus：function（status）{
     return status < 500; //仅当状态代码大于或等于500时拒绝
   }}
}）

• 消除
  您可以使用取消令牌取消请求。

axios cancel token API基于可取消的promise提议，目前处于阶段1
您可以使用CancelToken.source工厂创建一个取消令牌，如下所示：

var CancelToken = axios.CancelToken;
var source = CancelToken.source（）;
 
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
 
//取消请求（消息参数是可选的）
source.cancel（'操作被用户取消。'）;

您还可以通过将执行器函数传递给CancelToken构造函数来创建取消令牌：

var CancelToken = axios.CancelToken;
var cancel;
 
axios.get（'/ user / 12345'，{
   cancelToken：new CancelToken（function executor（c）{
     //一个执行器函数接收一个取消函数作为参数
     cancel = c;
   }）
}）;
 
// 取消请求
clear();

注意：您可以使用相同的取消令牌取消几个请求。

• 使用application / x-www-form-urlencoded格式

默认情况下，axios将JavaScript对象序列化为JSON。 要以应用程序/ x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。

1、浏览器
在浏览器中，您可以使用URLSearchParams API，如下所示：

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
请注意，所有浏览器都不支持URLSearchParams，但是有一个polyfill可用（确保polyfill全局环境）。

或者，您可以使用qs库对数据进行编码：

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

2、Node.js
在node.js中，可以使用querystring模块，如下所示：

var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' });

3、TypeScript
axios包括TypeScript定义。

import axios from 'axios';
axios.get('/user?ID=12345');

axios在很大程度上受到Angular提供的$http服务的启发。 最终，axios努力提供一个在Angular外使用的独立的$http-like服务。