【axios】axios不常用方法整理

参考文档：https://www.npmjs.com/package/axios

前期准备：可以用npm安装axios. npm install axios/bower install axios

我们经常用axios做请求的时候一般常用的是如下格式

1.post请求

//一.直接请求
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//---------------------------------我是分割线-----------------------------------------
//二.用参数请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

2.get请求

//一.直接请求
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//---------------------------------我是分割线-----------------------------------------
//二.用参数请求
axios({
  method:'get',
  url:'/user',
})
  .then(function(res) {
  console.log(res)
});
 .catch(function (error) {
    console.log(error);
  });

上面都是一些常用的格式请求，但是在业务需求中常有一些需求不满足于上面，下面介绍几种不常用的请求

1.axios.all[{}].then(axios.spread)同时执行多个请求，适用于一切企业类网站有多个筛选条件的时候

//上面是所有请求执行完毕之后再去执行返回， 
axios.all([
    axios.get('https://api.github.com/xxx/1'),
    axios.get('https://api.github.com/xxx/2')
  ])
  .then(axios.spread(function (userResp, reposResp) {
    // 上面两个请求都完成后，才执行这个回调方法
    console.log('User', userResp.data);
    console.log('Repositories', reposResp.data);
  }));

2.用特定的格式执行post请求 传给后台的参数有的是需要去掉{}的，即是x-www-form-urlencoded格式

//方法一：
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

//---------------------------------我是分割线-----------------------------------------
//二.用参数请求
var qs = require('qs');  //或者安装npm安装qs
axios.post('/xxxxx/xx', qs.stringify({ 'bar': 123 }));

3.拦截器 在请求之前或者接收之前进行拦截

 //-------------------------------官网例子-------------------------------
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });
 
// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  });


//--------------------------------------------项目中代码----------------------------------------------
axios.interceptors.request.use(function (config) {
          config.withCredentials = true   //请求头的配置，默认是false
          config.headers = {
              token :xxxx     //有的请求需要token，需要在这里配置
          }
          return config;
          }, function (error) {
          return Promise.reject(error);
      })