axios

vuejs 2 后 作者尤雨溪发布消息，不再继续维护vue-resource，官方推荐大axios。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。

特性：
1、从浏览器中创建 XMLHttpRequest；
2、从 node.js 发出 http 请求；
3、支持 Promise API；
4、拦截请求和响应；
5、转换请求和响应数据；
6、取消请求；
7、自动转换JSON数据；
8、客户端支持防止 CSRF/XSRF。

一、安装
1、 利用npm安装npm install axios --save
2、 利用bower安装bower install axios --save
3、 直接利用cdn引入<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>

二、使用：

假如你安装了vue脚手架，则在main.js文件中添加如下代码：

import axios from 'axios'
Vue.prototype.axios = axios

说明：

安装其他插件的时候，可以直接在 main.js 中引入并使用 Vue.use()来注册，但是 axios并不是vue插件，所以不能使用Vue.use()，所以只能在每个需要发送请求的组件中即时引入。

为了解决这个问题，我们在引入 axios 之后，通过修改原型链，来更方便的使用。

三、发起POST请求：

    axios.post('http://httpbin.org/post')
    .then(function(res){
        console.log(res.data);
    })
    .catch(function(err){
        console.log(err);
    });

四、发起一个GET请求：

    axios.get('https://api.github.com/events')
        .then(function(response){
            console.log(response.data);
        })
        .catch(function(err){
            console.log(err);
        });

五、一次发起多个请求：

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) {
    // Both requests are now complete
  }));

六、axios可以通过配置（config）来发送请求：

// Send a POST request
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
// GET request for remote image
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});

axios(url[, config])

// Send a GET request (default method)
axios('/user/12345');

七、请求 返回的内容：

{
  data:{},
  status:200,
  //从服务器返回的http状态文本
  statusText:'OK',
  //响应头信息
  headers: {},
  //`config`是在请求的时候的一些配置信息
  config: {}
}

你可以这样来获取响应信息：

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

八、当有跨域限制的时候解决方案：

跨域的解决办法有很多，比如script标签 、jsonp、后端设置cros等等...,但是我这里讲的是webpack配置vue 的 proxyTable解决跨域。

这里我请求的地址是 http://www.thenewstep.cn/test/testToken.php

那么在ProxyTable中具体配置如下：

​

proxyTable: {
      '/apis': {
        // 测试环境
        target: 'http://www.thenewstep.cn/',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/apis': ''   //需要rewrite重写的,
        }              
}

target：就是需要请求地址的接口域名。 

这里列举了1种数据请求方式：axios

main.js代码：

import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false

Vue.prototype.$axios = axios //将axios挂载在Vue实例原型上

// 设置axios请求的token
axios.defaults.headers.common['token'] = 'f4c902c9ae5a2a9d8f84868ad064e706'
//设置请求头
axios.defaults.headers.post["Content-type"] = "application/json"

axios请求页面代码：

this.$axios.post('/apis/test/testToken.php',data).then(res=>{
        console.log(res)
})

这里的'apis'就是在ProxyTable中配置的'/apis'。

九、拦截器：

1、你可以在请求、响应在到达then/catch之前拦截他们。

//添加一个请求拦截器
axios.interceptors.request.use(function(config){
  //在请求发出之前进行一些操作
  return config;
},function(err){
  //Do something with request error
  return Promise.reject(error);
});
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
  //在这里对返回的数据进行处理
  return res;
},function(err){
  //Do something with response error
  return Promise.reject(error);
})

2、取消拦截器：

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

3、 给自定义的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.header);
    }else {
      //一些错误是在设置请求的时候触发
      console.log('Error',error.message);
    }
    console.log(error.config);
  });

十一、取消

你可以通过一个cancel token来取消一个请求

1、你可以通过CancelToken.source工厂函数来创建一个cancel token

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 {
    //handle error
  }
});

//取消请求（信息的参数可以设置的）
source.cance("操作被用户取消");

2、你可以给cancelToken构造函数传递一个executor function来创建一个cancel token:

var cancelToken = axios.CancelToken;
var cance;
axios.get('/user/12345',{
  cancelToken: new CancelToken(function(c){
    //这个executor函数接受一个cancel function作为参数
    cancel = c;
  })
})
//取消请求
cancel();