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. 【Linux】grub引导修复

    将系统盘挂载上并设置开机从光盘启动(U盘也可以) 进入系统安装引导初始界面,然后选择最后一项Troubleshooting 然后选择第二项Rescue a CentOS system进入系统救援模式选 ...

  2. 【Java】java获取request body

    //方式一 public static String ReadAsChars(HttpServletRequest request) { BufferedReader br = null; Strin ...

  3. python中模块介绍

    一,模块概念 在计算机程序开发的过程当中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编码更加容易维护,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码 ...

  4. laravel框架手动删除迁移文件后再次创建报错

    手动删除laravel框架数据表迁移文件后再次创建报错 如下图: 执行创建操作之后会在autoload_static.php及autoload_classmap.php这两个文件中添加迁移文件的目录. ...

  5. 使用SSH方式实现Git远程连接GitHub/gitlab

    参照: https://blog.csdn.net/wuli_smbug/article/details/81480162

  6. spring controller使用了@ResponseBody却返回xml

    使用ajax请求数据 $.ajax({ url:message.rootPath +"/sendMessage.xhtml", type:"post", dat ...

  7. django 视图与网址

    我是一个新手,内容粗糙,望大家多多指点.在这里我只是总结自身所学. 视图与网址 操作文件:urls.py.views.py urls.py 作用:用于处理前台的链接(如前台访问:127.0.0.1:8 ...

  8. HTML块,含样式的标签

    HTML块,含样式的标签 html块 div标签 块元素,表示一块内容,没有具体的语义. span标签 行内元素,表示一行中的一小段内容,没有具体的语义. 含样式和语义的标签 em标签 行内元素,表示 ...

  9. QTP中类的使用(转)

    Call Test Class Tester Dim mvarTesterName,mvarAge,mvarGender                        Sub Class_Initia ...

  10. 后台获取html控件的值

    string name = Request.Form["Name1"].ToString(); “xxx” 里的是name值 Request["xx"]取到相同 ...