使用AbortController可主动取消SPA中路由切换时的残留异步请求，避免资源浪费和状态错乱；需在组件卸载或路由守卫中调用controller.abort()，并捕获AbortError。
在单页应用（SPA）中，用户快速切换路由时，前一个页面发起的异步请求（如 fetch 或 axios）可能仍在进行。若不主动取消，这些“残留请求”不仅浪费带宽和资源，还可能导致状态错乱（例如旧请求返回后更新了新页面的 UI）。现代 JavaScript 提供了标准且可靠的方案来解决这个问题：使用 AbortController 配合路由生命周期管理。
用 AbortController 主动中断请求
AbortController 是浏览器原生 API，可为 fetch、XMLHttpRequest（需手动适配）等提供中止信号。核心逻辑是：每个请求绑定一个独立的 AbortSignal，当路由即将离开时调用 controller.abort()。
- 创建 controller 实例，并将
signal传入fetch选项 - 在组件卸载或路由守卫（如
beforeRouteLeave、useEffect cleanup）中调用abort() - 被中止的请求会立即抛出
AbortError，需捕获避免未处理异常
示例（React + useEffect）：
useEffect(() => {
const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
.then(res => res.json())
.then(data => setData(data))
.catch(err => {
if (err.name === 'AbortError') return; // 忽略中止错误
console.error('请求失败:', err);
});
return () => controller.abort(); // 组件卸载时取消
}, []);
在 Vue Router 中结合路由守卫统一管理
Vue 3 的 onBeforeRouteLeave 或 beforeRouteLeave（Options API）是理想的取消时机。把 controller 存在组件实例或 ref 中，离开前统一 abort。
立即学习“Java免费学习笔记（深入）”；
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 避免在
setup中直接写异步请求，改用onMounted启动并保存 controller - 多个请求可共用一个 controller（abort 后所有关联请求都会终止），也可按需创建多个
- 注意：
router.push触发后，当前组件不会立刻销毁，因此必须在守卫中提前取消，而非依赖onUnmounted
Axios 用户请用 CancelToken（旧版）或 AbortController（v0.27.2+）
Axios 自 v0.27.2 起已原生支持 AbortSignal，推荐直接使用：
- 传入
{ signal: controller.signal }即可，无需额外配置 - 旧版本可用
CancelToken.source()，但已废弃，不建议新项目使用 - 全局请求拦截器中无法自动注入 signal，需在业务层显式传递
示例（Axios）：
const controller = new AbortController();
axios.get('/api/list', { signal: controller.signal })
.then(...)
.catch(err => {
if (axios.isCancel(err)) return;
// 处理其他错误
});
// 路由离开时
controller.abort();
进阶：封装请求 Hook / Composable，自动绑定生命周期
为减少重复代码，可封装一个带自动取消能力的请求函数。例如 React 的 useApi 或 Vue 的 useRequest：
- 内部创建
AbortController，并在组件卸载/路由离开时自动调用abort() - 支持手动触发取消（如用户点击“停止加载”）
- 可集成 loading 状态、错误重试、缓存等逻辑，但取消机制必须作为基础保障
关键点：取消逻辑必须与视图生命周期严格对齐，不能依赖定时器或超时猜测——只有明确的“离开当前上下文”才是安全的取消时机。
