1、概述：axios是基于promise的HTTP库，可以用在浏览器和node.js中

2、axios的特性有：

①从浏览器中创建XMLHttpRequests
②从node.js中创建http请求
③支持promise的API
④拦截请求和响应
⑤可以取消请求
⑥自动转换JSON数据
⑦客户端支持防御XSRF（跨站请求伪造）

3、安装

①使用npm安装：

npm install axios

②使用bower安装：

bower install axios

②使用cdn：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

4、axios的get请求的传参方式

①参数直接放在url后面

axios.get('/getUserInfo?uid=1').then(res =>{//成功的响应
  console.log(res);
}).catch(err => {//失败的响应
 console.log(err);
});

②参数使用params对象的形式

axios.get('getUserInfo',{
 params:{uid:1}
}).then(res =>{//成功的响应
   console.log(res);
}).catch(err => {//失败的响应
  console.log(err);
});

5、axios的post请求的传参方式

axios.post('/postUserInfo',{
  uname:'lili',
  age:11
}).then(res => {
 console.log(res);
}).catch(err => {
 console.log(err);
})

6、axios执行多个并发请求

let http1 = axios.get('/user/12345');
let http2 = axios.get('/user/12345/permissions');
axios.all([http1,http2]).then(
  axios.spread((acct,perms) => {
    //两个请求都完成之后
  })
)

7、axios请求方法的别名,使用别名的话，url、data、method不需要在配置中指定

①axios.request(config)
②axios.get(url,config)
③axios.delete(url,config)
④axios.head(url,config)
⑤axios.options(url,config)
⑥axios.post(url,data,config)
⑦axios.put(url,data,config)
⑧axios.patch(url,data,config)

8、可以使用自定义的配置创建一个axios的实例

let axios1 = axios.create({
  baseURL:'/getUser',
  timeout:10000，
  headers:{},
  ...
})

9、设置axios全局默认值

axios.defaults.baseURL = 'http://120.0.0.3/';
axios.defaults.header.common['Authorization'] = AUTH_TOKEN;
axios.defaults.timeout = 300000;
axios.defaults.header.post['Content-Type']='application/x-www-form-urlencoded;charset=utf-8';

10、请求拦截器

axios.interceptors.request.use(
  config => {
  let token1 = sessionStorage.getItem(token);
    if(token1) {//如果存在token，就将token添加在http请求的header中
      config.header.token = token1;
    }
    return config;
  },
  error => {
    //跳转到登录页
    location.href('/login');//或者在引入了vue-router的情况下使用 router.replace('/login');
    return Promise.reject(error);
  }
)

11、响应拦截器

axios.interceptors.reponse.use(
  response => {
    switch(reponse.data.code){
      case 400:
       router.replace('/login');
       break;
       ...
    }
    
    return Promise.reject(reponse);
  },
  error => {
    return Promise.reject(error);
  }
)

12、拦截器的移除

const requestInterceptor = axios.interceptors.request.use(config =>{},error => {});
const responseInterceptor = axios.interceptors.response.use(response =>{},error => {});
axios.interceptors.request.eject(requestInterceptor);
axios.interceptors.response.eject(responseInterceptor);

13、使用canceltoken取消一个或多个请求(详细见官网)

①方法一：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user', {
  cancelToken: source.token
}).catch((thrown) => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});

axios.post('/user', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

②方法二：传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user', {
  cancelToken: new CancelToken((c) =>{
    cancel = c;// executor 函数接收一个 cancel 函数作为参数
  })
});

// 取消请求
cancel();

[ axios官网学习：http://www.axios-js.com/zh-cn/docs/index.html ]