vue axios同时取消多个请求、 大数据展示平台离当前页面取消所有获取数据axios请求、cancelToken() 实现详解

项目场景：

批量取消未响应的axios请求

---

问题描述：

后端小李今天突然找我说后端服务挂了，我心想和我有啥关系，但是当他打开日志之后，我懵逼了，全是我前端调用后端接口的请求报错导致错误日志堆积磁盘爆满（话说内存不能给分大一点吗），说归说还是我写的bug还要我处理。

---

原因分析：

定时获取数据的定时器在token失效之后没有清除，这个bug改完之后，我立马又想到一个问题由于大数据监控平台数据量比较大后端接口响应时间较长，虽然我清了定时器但是那些还未响应请求接口咋办，于是我想到了axios的CancelToken()，取消当前的所有请求。

---

解决方案：

使用axios的CancelToken()批量处理，过程如下：

1.在全局封装axios的时候增加一个存储当前所有请求的数组

// 当前异步请求的合集
const _axiosPromiseArr = []

2.axios请求拦截器的config中增加cancelToken()

Axios.interceptors.request.use(config=>{
    config.cancelToken = new axios.CancelToken(cancel => {
      _axiosPromiseArr.push({cancel})
    })
    return config;
    },
    err => {
    return Promise.reject(err);
  }
)

3.当服务器报500的时候清除当前所有的请求，响应拦截器中增加

Axios.interceptors.response.use(
 response=>{
    if (response.data.code === 500) {
       // 清除当前所有的未得到结果的异步请求
      _axiosPromiseArr.forEach((element, index) => {
         element.cancel()
         delete _axiosPromiseArr[index]
      });
      localStorage.clear();
      return false;
      }
   } 
)

4.或者是当离开这一个页面、进入下一个页面的时候取消,这是后建议你将存放当前异步请求合集的数组挂在到window对象上这样就可以全局使用了。

在封装axios的时候将_axiosPromiseArr数组挂载到window对象上

window._axiosPromiseArr = []

路由守卫中增加当你离开这个页面的时候清除所有的请求

router.beforeEach((to, from, next)=>{
    window._axiosPromiseArr.forEach((element, index) => {
          element.cancel()
          delete window._axiosPromiseArr[index]
    });
})