首页 > 移动平台 > 详细

切换路由时取消全部或者部分axios请求,并将一些从不需要取消的加入白名单

时间:2019-08-20 16:10:23      阅读:503      评论:0      收藏:0      [点我收藏+]

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请求

router.beforeEach((to, from, next) => {
    cancelAxios();
    // 或者cancelAxios(["axios1", "axios2"])
    // 进行其他业务操作
})

切换路由时取消全部或者部分axios请求,并将一些从不需要取消的加入白名单

原文:https://www.cnblogs.com/XHappyness/p/11383472.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!