# Vue全家桶之vue-resource && vue-axios（更新中）

异步请求组件，你也可以认为是异步请求的JS库，毕竟这也确实是封装了原生JS的AJAX库。目前vue-resource不再维护后已经被官方抛弃，vue官方推荐使用各方面都更为强大的axios。

如果你使用vue-cli脚手架搭建项目，那我建议使用npm i vue-resource或npm i axios进行本地安装。这种安装方式会自动加入默认的-S参数将依赖写入package.json文件中，这两者均为异步请求组件，推荐使用axios。

1. 提供了七种请求API(HTTP方法)

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

   ---

   参数              类型              概述
   url             string              请求URL
   method          string              请求方法
   body            Object              请求体
   params          Object              携带的参数对象
   headers         Object              请求头
   timeout         Number              请求超时时间(ms)
   before          function(request)   请求发送前的处理函数
   progress        function(request)   ProgressEvent回调处理函数
   credientials    boolean             跨域请求时是否需要使用凭证
   emulateHTTP     boolean             以POST方式发送PUT/PATCH/DELETE请求，并设置请求头的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;
   

2. 全局拦截器interceptors

   • 当某个页面需要请求多个接口地址时可以使用全局拦截器。

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

3. 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      响应的状态文本
   header      Object      响应头
   

基本使用

1. 利用webpack.dev.conf.js和express访问本地接口获取本地假数据data.json。

2. 在main.js中引入vue-resource和axios: import VueResource from 'vue-resource'和import Axios from 'axios'。

3. 引入后需要实例化：Vue.use(VueResource)和Vue.prototype.$http= axios,之后就可以在methods中使用$http了。

4. 基于全局Vue对象使用http

   • Vue.http.get('/entities', [options]).then(successCallback, errorCallback);
   • Vue.http.post('/entities', [options]).then(successCallback, errorCallback);

5. 在一个Vue实例内使用$http

   • Vue.$http.get('/entities', [options]).then(successCallback, errorCallback);
   • Vue.$http.post('/entities', [options]).then(successCallback, errorCallback);

CURD前端操作实例

axios简介与基本使用

参考文档

1. pagekit/vue-resource开源地址
2. axios/axios开源地址
3. Vue基础知识之vue-resource和axios
4. 看云-Axios中文说明