切換路由時取消全部或者部分axios請求，並將一些從不需要取消的加入白名單

1. axios攔截器進行配置，除了白名單中的接口，統統保存到全局變量canCancelAxios中

window.canCancelAxios = [];

// http request 攔截器
axios.interceptors.request.use(
	config => {
		let whiteList = ['/test1', '/test2']; // 白名單接口
		if (config.url && whiteList.every(item => !config.url.includes(item))) {
			config.cancelToken = new axios.CancelToken(function (c) { window.canCancelAxios.push({ key: config.key || "", cancel: c }) });
		}
		return config;
	},
	err => {
		return Promise.reject(err);
	}
)

2. 定義一個取消取消axios的方法

/**
 * 取消axios請求
 * @param cellArr 要取消的接口；如果不傳參，則取消canCancelAxios保存的所有接口
 */
export function cancelAxios(cellArr = []) {
  if (cellArr.length > 0) {
    cellArr.forEach(val => {
      for (let i = 0; i < window.canCancelAxios.length; i++) {
        if (window.canCancelAxios[i].key === val) {
          window.canCancelAxios[i].cancel();
          window.canCancelAxios.splice(i, 1);
          i--;
        }
      }
    })
  } else {
    for (let i = 0; i < window.canCancelAxios.length; i++) {
      window.canCancelAxios[i].cancel();
      window.canCancelAxios.splice(i, 1);
      i--;
    }
  }
}

3. 路由配置中，路由切換時，取消axios請求

import cancelAxios from "***";
router.beforeEach((to, from, next) => {
    cancelAxios();
    // 進行其他業務操作
})

4. 特殊情況下（比如切換tab頁時），可能需要取消特定某些axios

import cancelAxios from "***";
cancelAxios(["axios1", "axios2"]);

注意

// 這里取消特定的axios是根據axios攔截器中config.key來識別接口的，所以接口請求時要配置key參數，不然不能正確取消；
// 比如上面要取消的["axios1", "axios2"]
test1: () => Axios.get(`/path1`, { key: "axios1" }),
test2: () => Axios.get(`/path2`, { key: "axios2" })