vue-router 切换路由关闭当前存在的所有axios请求

40 阅读 0 评论 27 点赞

我是靠谱客的博主潇洒煎饼，最近开发中收集的这篇文章主要介绍vue-router 切换路由关闭当前存在的所有axios请求，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求一：vue项目中，跳转路由时，关闭当前前一个页面还未返回的所有请求.

在axios.js文件中,将发起的请求存在全局。

instance.interceptors.request.use(
config => {
const controller = new AbortController()
config.signal = controller.signal
if (!window._axiosPending) {
window['_axiosPending'] = []
}
window['_axiosPending'].push({
url: config.url,
controller: controller
})
return config
})

然后在路由跳转中，需要在router/idnex.js 文件中清空存在全局的请求

router.beforeEach((to, from, next) => {
if (window && window._axiosPending) {
window._axiosPending.forEach((im, index) => {
im && im.controller.abort()
delete window._axiosPending[index]
})
window._axiosPending = []
}
})