页面路由切换时取消未完成请求，需用AbortController配合路由生命周期（如React useEffect清理函数、Vue onBeforeUnmount）主动中止fetch或Axios请求，每个请求应有独立实例并及时abort以避免内存泄漏。
在页面路由切换时取消未完成的请求，核心是利用 AbortController 配合路由生命周期（如 React Router 的 useEffect 清理函数、Vue 的 onBeforeUnmount 或通用的组件卸载时机）来主动中止请求。
使用 AbortController 主动中断 fetch 请求
AbortController 是现代浏览器原生支持的取消机制，适用于 fetch。关键是在请求发起前创建控制器，并在组件即将销毁或路由离开时调用 abort()：
- 在组件内声明
const controller = new AbortController() - 将
signal: controller.signal传入fetch选项 - 在清理函数（如
useEffect返回的函数）中执行controller.abort()
例如 React 中：
（注意：abort 后再调用不会报错，可安全多次调用）与路由守卫或组件卸载时机对齐
不能只靠“点击跳转”手动取消，必须绑定到路由变化的真实生命周期：
立即学习“Java免费学习笔记（深入）”；
- React Router v6+：在组件内部用
useEffect，返回的清理函数会在组件 unmount 或依赖变化（如location.pathname）时触发 - Vue Router：在
setup中使用onBeforeRouteLeave或onBeforeUnmount - 纯前端路由（如手写 history.pushState）：监听
popstate事件，在回调中 abort；或封装统一的路由跳转函数，跳转前批量 abort 当前控制器
避免内存泄漏：控制器需随组件/请求生命周期管理
常见错误是把 AbortController 声明在模块顶层或父组件作用域，导致多个请求共用一个 signal，或卸载后仍持有引用：
- 每个请求应有独立的
AbortController实例 - 不要复用已 abort 的 controller（需新建）
- 若请求被封装成自定义 Hook（如
useApi），应在每次调用时新建 controller，并暴露 abort 方法供外部清理
Axios 用户注意：用 CancelToken 已废弃，改用 AbortController
Axios 1.2.0+ 已原生支持 AbortSignal：
- 直接传
signal: controller.signal到请求配置中，无需额外适配 - 旧版用
CancelToken的代码建议迁移，因它不兼容 Promise 取消语义，且已被标记为 deprecated - 若暂无法升级 Axios，至少确保
cancel()调用发生在组件卸载时，而非仅靠按钮点击
