axios拦截器中添加取消请求功能

场景：tab切换且使用同一个变量存储数据，页面切换取消不必要的未完成请求

1、封装

// main.js
window.__axiosPromiseArr = []

// http.js
import axios from 'axios'
let instance = axios.create()
// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    config.cancelToken = new axios.CancelToken(cancel => {
      window.__axiosPromiseArr.push({
        url: config.url,
        cancel
      })
    })
  // ...
)

2、使用

// 1、页面切换（取消所有的请求）
route.beforeEach((to, from, next) => {
  if (window.__axiosPromiseArr) {
    window.__axiosPromiseArr.forEach((ele, ind) => {
      ele.cancel()
      delete window.__axiosPromiseArr[ind]
    })
  }
// ...
  next()
})
// 2、tab，数据请求（根据url取消请求）
getData () {
   if (window.__axiosPromiseArr) {
      window.__axiosPromiseArr.forEach((ele, ind) => {
        if(ele.url === 'xxx'){   
            ele.cancel()
            delete window.__axiosPromiseArr[ind]
        }
      })
    }
// ...
}