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

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

  1. axios 封装 跨域 实现 (后端跨域配置白名单)

    1. 始vue化项目 vue init webpack deaxios # 使用脚手架创建项目 deaxios(项目名,随便取得) cd deaxios # 进入项目cnpm install npm ...

  2. vue2 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置

    官方用例:https://router.vuejs.org/zh-cn/advanced/scroll-behavior.html import Vue from 'vue' import Route ...

  3. vue切换路由时动画

    安装个包 npm i nprogress 直接导入使用 最终的效果就是

  4. Vue切换页面时中断axios请求

    一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...

  5. Vue中断axios请求-切换页面+重复请求

    切换页面时中断 一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能, ...

  6. VUE如何实现切换页面时的过渡动画?

    最近再写页面的时候,感觉页面之间的切换有点生硬,所以查了一下文档看见了transition这个组建,很实用,故此在这里跟大家分享一下 --------------------------------- ...

  7. vue切换路由页面内容没有重载

    项目中遇到这样一个问题: 在一个地方填了一个申请的表单,需要在另一个页面的列表上显示出来这条申请的数据,但是由于vue的缓存,在切换路由时列表上并没有及时更新数据,解决方法如下: vue路由切换时页面 ...

  8. 10. vue axios 请求未完成时路由跳转报错问题

    axios 请求未完成时路由跳转报错问题 前两天项目基本功能算是完成了,在公司测试时遇到了遇到了一个问题,那就是在请求未完成时进行路由跳转时会报错,想了几种办法来解决,例如加loading,请求拦截, ...

  9. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

随机推荐

  1. tomcat启动一闪而过处理

    进入tomcat安装目录(解压目录)下的bin目录,比如D:\Tomcat1\apache-tomcat-7.0.810\bin,打开startup.bat文件,在最上面加上下面两句: SET JAV ...

  2. php chr()函数 语法

    php chr()函数 语法 作用:从指定的 ASCII 值返回字符.直线电机选型 语法:chr(ascii) 参数: 参数 描述 ascii  必须,指定ASCII值 说明:chr() 函数从指定的 ...

  3. 第一次用angularJS做后台管理点滴

    很早以前就大概看过一点angualrjs,但是没有项目,一直没有进行下去,就是干巴巴的看着,过了一段时间发现什么也不记得了. 来yulebaby我的第一个后台管理是用easyui做的,做完那个以后发现 ...

  4. [杂题]:B/b(二分答案)

    题目传送门(内部题53) 输入格式 第二行$2$个整数表示$n,m$.接下来$m$行每行两个整数,描述一个点对$(x_i,y_i)$. 输出格式 一个整数,表示最短距离. 样例 样例输入: 6 21 ...

  5. Configuring IPMI under Linux using ipmitool

    http://www.thomas-krenn.com/en/wiki/Configuring_IPMI_under_Linux_using_ipmitool Configuring IPMI und ...

  6. vue 页面添加水印 ts

    "use strict"; // tslint:disable-next-line: only-arrow-functions const setWatermark: (str: ...

  7. python3+django2 个人简单博客实现 -正在施工

  8. [题解]Crazy Binary String-前缀和(2019牛客多校第三场B题)

    题目链接:https://ac.nowcoder.com/acm/contest/883/B 题意: 给你一段长度为n,且只有 ‘0’ 和 ‘1’ 组成的字符串 a[0,...,n-1].求子串中 ‘ ...

  9. eclipse搭建jmeter编译环境(Jmeter二次开发)

    jmeter是开源项目,方便大家对代码进行改动. 写了一个简单教程,帮助入门者进行搭建jmeter编译环境! 下载地址 文件格式为zip,解压后为docx微软office2007文档. 或者直接访问我 ...

  10. java.lang -> Boolean

    java.lang -> Boolean 是什么 Boolean 类是将 boolean 基本类型进行包装.类型为 Boolean 的对象包含一个单一属性 value,其类型为 boolean. ...