vue路由跳转后,终止上一个页面正在请求的资源

实现在路由跳转后,把上一个页面正在请求的资源关闭。

  1. 在发起请求时拦截请求加入代码
javascript 复制代码
// 拦截请求
instance.interceptors.request.use((req) => {
        req.cancelToken = new axios.CancelToken(cancel => {
            if (!window._axiosPromiseArr){
                window._axiosPromiseArr = [];
            }
            window._axiosPromiseArr.push({cancel});
        });
});
  1. 在全局路由跳转前写入代码
javascript 复制代码
router.beforeEach((to, from, next) => {
    console.log('[访问路由]' + (to.name || to.path))
    if (window._axiosPromiseArr) {
        window._axiosPromiseArr.forEach((ele, index) => {
            // 路由跳转前,终止上一个页面正在请求的内容
            ele.cancel();
            delete window._axiosPromiseArr[index];
        })
    }
 return next();
})
相关推荐
LuckySusu2 分钟前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
LuckySusu2 分钟前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js
勤奋菲菲6 分钟前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
洋不写bug14 分钟前
前端环境搭建,保姆式教学
前端
需要兼职养活自己26 分钟前
react高阶组件
前端·react.js
TechFrank33 分钟前
Shadcn/ui 重磅更新:7 个实用新组件深度解析与实战指南
前端
快乐是一切41 分钟前
PDF中的图像与外部对象
前端
前端开发呀1 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云枫晖1 小时前
破壁前行:深度解析前端跨域的本质与实战
前端·浏览器
文心快码BaiduComate1 小时前
代码·创想·未来——百度文心快码创意探索Meetup来啦
前端·后端·程序员