js vue系统路由跳转时取消所有接口

在Vue.js中，当进行系统路由跳转并希望取消之前的所有接口请求时，可以利用Vue Router提供的钩子函数和Vuex的状态管理来实现。以下是一个常见的做法：

使用路由守卫 (Route Guards):
beforeEach 钩子可以在每次导航开始前执行。你可以在这里检查当前的请求状态，如果有未完成的请求，可以使用axios等库的取消功能。

router.beforeEach((to, from, next) => {
// 取消正在运行的请求
store.dispatch('cancelAllRequests');

// 其他导航逻辑...
next();
});
登录后复制
在这里，store.dispatch('cancelAllRequests') 就是在 Vuex 中定义的一个 action，用于清空所有正在进行的请求。

使用 Axios 的 cancelToken:
如果你的 API 请求使用了 Axios，并且它们都返回了一个 CancelToken，那么可以在组件卸载或路由切换时手动取消它。

// 示例 Axios 调用
const request = axios.get('/api', { cancelToken });

// 组件销毁时取消请求
beforeDestroy() {
request.cancel();
}
登录后复制

全局拦截器（Global Interceptors）:
Vue Router 提供了 router.appNavigationHook，可以注册一个全局导航拦截器来统一处理路由切换时的资源清理。

router.appNavigationHook('popstate', () => {
// 取消请求...
});
登录后复制