AbortController 是组件卸载时取消异步操作最直接原生的方式，通过 signal 绑定 fetch、定时器等任务，并在 useEffect 清理函数中调用 abort()，确保谁发起谁清理、独立实例、避免复用。
组件卸载后取消未完成异步，核心是让异步操作“感知生命周期”，而不是靠手动 flag 判断。AbortController 是现代 JavaScript 中最直接、原生、可靠的方式，它把取消权交还给开发者，也避免了状态更新错误和内存泄漏。
用 AbortController 绑定 fetch 请求
fetch 原生支持 signal，这是最常用也最稳妥的场景：
- 每次 useEffect 或事件中发起请求前，创建新的 AbortController 实例
- 把 controller.signal 传入 fetch 配置项
- 在清理函数（useEffect 返回函数）中调用 controller.abort()
- catch 中检查 err.name === 'AbortError'，区分取消与真实错误
示例：
const controller = new AbortController();fetch('/api/user', { signal: controller.signal })
.then(res => res.json())
.then(data => setData(data))
.catch(err => {
if (err.name !== 'AbortError') console.error(err);
});
return () => controller.abort();
统一管理多个异步任务
一个组件里可能同时有 fetch、定时器、轮询、WebSocket 连接等。可以复用同一个 signal，或为不同任务分配独立 controller：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
- 对定时器：用 signal.addEventListener('abort', ...) 清理 setTimeout/setInterval
- 对自定义 Promise：在执行前检查 signal.aborted，过程中监听 abort 事件并 reject
- 对第三方库（如 axios）：部分版本支持 signal，不支持时可用 CancelToken 降级，但推荐升级到 v1.5+ 使用 AbortSignal
处理竞态请求（比如搜索输入）
用户快速输入时，旧请求必须被取消，否则结果会错乱：
- 声明一个 ref 存储当前 controller（let currentController = null）
- 每次新请求前，先 if (currentController) currentController.abort()
- 再新建 controller 并赋值给 ref
- 确保每次只存在一个活跃的 signal
这样既防止 UI 显示过期数据，也节省带宽和服务器资源。
注意清理时机和边界情况
不是所有异步都适合用 AbortController，但关键原则一致：谁发起、谁清理：
- useEffect 的清理函数是标准出口，务必返回 controller.abort()
- 事件处理器内发起的异步（如 onClick），需在组件卸载或条件变更时主动 abort，不能只依赖 useEffect
- 避免复用 controller 实例——每个异步操作应有独立实例，否则一次 abort 会误杀其他任务
- 不要在 abort 后继续使用 signal，aborted 属性变为 true 后不可逆
