axios特点

• 基于promise封装的异步请求库
• 浏览器端/node端都可以使用
• 支持请求/响应拦截器
• 支持请求取消
• 支持请求/响应数据转换 JSON.parse||stringify
• 批量发送多个请求 （promise.all([...])）

axios.create(config)

1. 根据指定配置创建一个新的axios，也就是每个axios都有自己的配置。
2. 新axios只是没有取消请求和批量发请求的方法，其他所有语法都是一致的。

为什么要设计这个语法？
需求：项目中部分接口的主域名有差别，配置不太一样，如何处理？
解决：创建两个新axios，每个都有自己特有的配置，分别应用到不同要求的请求中。

实例

// 第一个axios
  const ins = axios.create({
    baseURL: 'http://localhost:3000'
  })
// 第二个axios
  const ins2 = axios.create({
    baseURL: 'http://localhost:4000'
  })
// 使用第一个axios
  async function test() {
    ins({
      url: '/posts',
      params: {
        id: 2
      }
    })
  }
// 使用第二个axios
  async function test2() {
    ins2({
      url: '/posts',
      params: {
        id: 2
      }
    })
  }

请求拦截器 、 响应拦截器

axios.interceptors.request.use() 请求拦截器(先定义后执行,源码中使用unshift)

axios.interceptors.request.use(
  config => {
    return config
  },
  err => {
    return err
  }
)

axios.interceptors.response.use() 响应拦截器(顺序执行,源码中使用push)

axios.interceptors.response.use(
  response => {
    return response
  },
  err => {
    return err
  }
)

为了让promise链延续，一定要将结果返回。

取消请求

• 在请求的配置对象中 cancelToken: new axios.CancelToken((c)=>{cancel = c}) , c是用于取消请求的函数。

let cancel;  // 用于储存取消请求的函数
// 发送请求的函数
function getSome(){
  axios({
    url:'localhost:4000/getsome',
    cancelToken:new axios.CancelToken((c)=>{
      cancel = c
    })
  }).then( response => {
    cancel = null //请求成功则将取消请求的函数赋值为null
  } ).catch(error => {
    cancel = null
    console.log(error.message)  //如果取消请求则会输出该内容
  })
}

// 取消请求的函数
function cancelReq(){
  if(typeof cancel === 'function'){
    cancel()
  }else{
    console.log(‘当前没有正在执行的请求~’)
  }
}

判断错误是否由取消请求引起

• axios.isCancel(error)

if(axios.isCancel(error)){
  console.log('请求取消~!')
}else{
  console.log('请求错误~!')
}