axios

Posted 2020-12-26 Samve

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>

二、发起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);
})

七、拦截器：

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();