博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
切换路由时取消全部或者部分axios请求,并将一些从不需要取消的加入白名单...
阅读量:4493 次
发布时间:2019-06-08

本文共 1598 字,大约阅读时间需要 5 分钟。

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" })

转载于:https://www.cnblogs.com/XHappyness/p/11383472.html

你可能感兴趣的文章
【代码笔记】iOS-两个滚动条,上下都能滑动
查看>>
矩阵乘法-洛谷P2233 [HNOI2002] 公交车路线
查看>>
openstack云主机硬盘复制查询
查看>>
写个神经网络,让她认得我`(๑•ᴗ•๑)(Tensorflow,opencv,dlib,cnn,人脸识别)
查看>>
《程序是怎样跑起来的》第三章
查看>>
Jquery回到顶部效果
查看>>
开园第一笔
查看>>
Spark项目之电商用户行为分析大数据平台之(七)数据调研--基本数据结构介绍...
查看>>
原来fb可以在一个工程里面输出多个swf模块
查看>>
Codeforces Round #271 (Div. 2) E. Pillars 线段树优化dp
查看>>
Codeforces Round #FF (Div. 2) D. DZY Loves Modification 优先队列
查看>>
【学习】logger
查看>>
Delphi APP 開發入門(十)REST Client 開發
查看>>
elk
查看>>
.net 模糊匹配路径
查看>>
用包来组织模型
查看>>
ORA-29857: 表空间中存在域索引和/或次级对象
查看>>
LeetCode58 Length of Last Word
查看>>
Python基础语法 系统学习
查看>>
推荐15款好用的JS开发工具
查看>>