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使用

一、引入vue-resource

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

二、引入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实例

一、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) }) }

二、JSONP请求

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

三、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 } } })

四、PUT请求

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

五、Delete请求

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

vue-resource是一个很是轻量的用于处理HTTP请求的插件，它提供了两种方式来处理HTTP请求：
一、使用Vue.http或this.$http
二、使用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 中使用。

• 功能特性
  一、在浏览器中发送 XMLHttpRequests 请求
  二、在 node.js 中发送 http请求
  三、支持 Promise API
  四、拦截请求和响应
  五、转换请求和响应数据
  六、取消请求
  七、自动转换 JSON 数据
  八、客户端支持保护安全免受 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); });

• 配置默认值

一、全局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';

二、自定义实例默认值

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

三、配置优先级顺序
配置将与优先顺序合并。 顺序是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格式发送数据，您可使用如下选项之一。

一、浏览器
在浏览器中，您可使用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 });

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

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

三、TypeScript
axios包括TypeScript定义。

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