全局路由守卫中取消未完成请求的核心是用 abortcontroller 统一管理信号并在跳转前 abort，需为每个请求创建独立实例、在 beforeeach 中用 map 存储并清理、结合组件卸载时主动 abort，并注意 axios 1.0+ 的 signal 适配与 aborterror 捕获。
在全局路由守卫中取消未完成的请求，核心是利用 AbortController 统一管理请求信号，并在路由跳转前调用 abort()。关键在于把控制器实例与当前路由或组件生命周期关联起来，避免内存泄漏和误取消。
1. 为每个请求创建独立的 AbortController
不要复用同一个 AbortController 实例。每次发起请求时新建一个，并将其引用保存到可追踪的位置（如路由元信息、组件实例或 Map 缓存）。
- 推荐在发送请求前创建：
const controller = new AbortController();fetch(url, { signal: controller.signal }) - 避免在守卫外提前 abort —— 必须确保该 controller 确实对应「将被中断」的请求
2. 在路由守卫中保存并清理请求控制器
使用 router.beforeEach 拦截导航，在跳转前 abort 上一个页面（或当前匹配路由）关联的请求。
- 用
Map存储路由路径 → Controller 映射：const pendingRequests = new Map();
在请求发起时：pendingRequests.set(to.path, controller); - 在
beforeEach中检查目标路由是否已有待处理请求：if (pendingRequests.has(to.path)) {pendingRequests.get(to.path).abort();pendingRequests.delete(to.path);}
3. 结合组件卸载自动清理（推荐补充）
仅靠路由守卫不够健壮，比如用户关闭标签页、强制刷新等场景。应在组件 onUnmounted（Vue）或 useEffect cleanup（React）中主动 abort。
- 组件内请求示例（Vue 3 + Composition API）：
const controller = new AbortController();onUnmounted(() => controller.abort()); - 这样即使路由没变（如参数更新但组件复用），也能防止旧请求残留
4. 注意 Axios 的适配写法
Axios 支持 signal，但老版本需用 cancelToken（已废弃）。建议升级到 v1.0+ 并统一用 AbortController。
- 正确传入信号：
axios.get('/api/data', { signal: controller.signal }) - 捕获 abort 错误：
.catch(err => { if (err.name === 'AbortError') return; /* 处理其他错误 */ })
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
