如何利用守卫实现全站 API 请求的取消挂起：切换页面自动断开接口

应将请求取消逻辑放在组件的 ngOnDestroy 中而非 CanDeactivate 守卫，因守卫不保证触发且无法访问组件请求实例；推荐用 AbortController 管理 fetch 或 Subscription/takeUntil 管理 HttpClient 请求，并在销毁时统一清理。

在单页应用（SPA）中，用户快速切换页面时，上一个页面发起的 API 请求可能仍在后台运行。这些“悬而未决”的请求不仅浪费资源，还可能导致状态错乱（比如新页面渲染了旧请求的响应）。利用 Angular 的 路由守卫（特别是 CanDeactivate）配合 AbortController 或 Subject.unsubscribe()，可实现页面离开时主动取消当前所有挂起请求。

用 AbortController 管理 fetch 请求

现代浏览器原生支持 AbortController，适合封装 fetch 请求。核心思路是：在组件初始化时创建控制器，在路由即将离开前调用 abort()。

• 组件内声明：private abortCtrl = new AbortController();
• 发起请求时传入：fetch('/api/data', { signal: this.abortCtrl.signal })
• 在 CanDeactivate 守卫或组件的 ngOnDestroy 中调用 this.abortCtrl.abort()
• 注意：abort() 后再次调用不会报错，但后续 fetch 会立即 reject（AbortError），需在 catch 中静默处理

用 Subscription 管理 HttpClient 请求

Angular 的 HttpClient 返回 Observable，天然适配 RxJS 的取消机制。关键不是靠守卫“拦截”，而是把请求订阅存起来，在离开前统一销毁。

• 组件中定义：private reqSubs = new Subscription();
• 发起请求时：this.reqSubs.add(this.http.get('/api/list').subscribe(...))
• 在 CanDeactivate 方法中返回 this.reqSubs.unsubscribe()，或更推荐在 ngOnDestroy 中执行（守卫不保证一定触发，尤其刷新/关闭标签页）
• 也可结合 takeUntil + Subject 实现自动清理，例如：this.http.get(...).pipe(takeUntil(this.destroy$)).subscribe()，并在 ngOnDestroy 中 this.destroy$.next()

全局统一管理：拦截器 + 路由状态跟踪

若需全站自动取消（不依赖每个组件手动管理），可构建一个轻量级请求生命周期管理器：

• 创建服务（如 RequestTrackerService），用 Map 存储当前活跃请求 ID 与 AbortSignal 或 Subscription
• 编写 HTTP 拦截器，在请求发出时生成唯一 ID 并注册；响应或错误时自动清理
• 监听 Router.events，当捕获到 NavigationStart 时，遍历并取消所有未完成请求
• 为避免误杀（如登录接口、上传进度等需跨路由保留的请求），可加白名单机制，例如检查 URL 是否含 /auth/ 或请求头是否带 X-Persist

守卫只是辅助，真正可靠的是组件级清理

CanDeactivate 守卫常被误解为“必经闸门”，但它不适用于强制中断请求——它只决定是否允许导航，且无法直接访问目标组件的请求实例。实际开发中：

• 守卫更适合做“表单未保存提示”这类业务逻辑判断，而非技术性取消
• 请求取消应放在组件自身的 ngOnDestroy 中，这是 Angular 生命周期最稳定可靠的清理时机
• 搭配 route.data 可让组件知道是否需要启用自动取消（例如 { autoCancel: true }），实现按需启用