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

itmacy

于 2024-08-30 11:24:17 发布

阅读量353

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/itmacy/article/details/141709656

版权

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

在发起请求时拦截请求加入代码

// 拦截请求
instance.interceptors.request.use((req) => {
        req.cancelToken = new axios.CancelToken(cancel => {
            if (!window._axiosPromiseArr){
                window._axiosPromiseArr = [];
            }
            window._axiosPromiseArr.push({cancel});
        });
});

在全局路由跳转前写入代码

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();
})