AbortController 是浏览器提供的通用中止信号机制，fetch 通过 signal 选项接收其 AbortSignal 实例；调用 controller.abort() 会触发 abort 事件，使关联 fetch 立即以 DOMException（name="AbortError"）reject，终止内部状态机而非撤回网络包。
AbortController 是什么，为什么它能中断 fetch
AbortController 不是 fetch 的专属功能，而是浏览器提供的通用中止信号机制。fetch 接收的 signal 选项本质上是一个只读的 AbortSignal 实例，它与控制器绑定；调用 controller.abort() 会触发该 signal 的 abort 事件，并使所有监听它的 fetch 请求立刻 reject，错误类型为 DOMException，name 属性值为 "AbortError"。
关键点在于：中断不是“取消网络包”，而是让 fetch 主动终止内部状态机，避免后续处理——所以你不会看到请求发到服务端后又被“撤回”，但能阻止 .then/.catch 执行、避免内存泄漏和 UI 错乱。
如何正确创建并复用 AbortController 实例
每个需要独立控制的 fetch 请求，都应使用**独立的** AbortController 实例。复用同一个 controller 会导致多个请求被同时中断，容易引发意外交互（比如搜索框输入时上一个请求还没结束，新请求直接 abort 了旧的——这合理；但如果两个并行的用户资料请求共用 controller，点一个“取消”就让另一个也失败，就不合理）。
- ✅ 正确：每次请求前
const controller = new AbortController() - ❌ 错误：在模块顶层声明单例
const controller = new AbortController()并到处传 - ⚠️ 注意：
controller.signal只能被传给一次 fetch（虽然技术上可多次传，但一旦 abort，所有使用它的 fetch 都会失败）
中断触发时机与常见错误捕获方式
中断发生时，fetch Promise 会以 rejected 状态结束，但错误不是 TypeError 或 NetworkError，而是 DOMException，且 name === "AbortError"。如果用通用 catch(err) { ... } 未做区分，可能把中断误判为真实错误（比如弹出“请求失败”提示），造成 UX 混乱。
推荐写法：
const controller = new AbortController();
fetch("/api/data", { signal: controller.signal })
.then(r => r.json())
.catch(err => {
if (err.name === "AbortError") {
console.log("请求已被主动中断");
return; // 不做错误提示
}
throw err; // 其他错误继续抛出
});
- 不要依赖
err.message.includes("aborted")—— message 不稳定，各浏览器不同 - 不要忽略
AbortError后直接 return undefined，否则上层可能收到 undefined 当作正常数据 - 若使用 async/await，同样需用 try/catch +
err.name === "AbortError"判断
一键中断按钮如何安全绑定到控制器
“一键中断”按钮必须持有对当前请求 controller 的引用，且在点击时调用 abort()。常见陷阱是闭包捕获了过期 controller（比如多次快速点击触发多个请求，按钮始终 abort 最后一个），或未清理已 abort 的 controller 导致重复调用 abort()（虽无害，但易混淆调试）。
实操建议：
- 将 controller 存在组件 state 或 DOM 元素的
dataset中（如button.dataset.controllerId = id），配合 Map 管理生命周期 - 点击按钮时先检查
!controller.signal.aborted再调用controller.abort() - 请求 resolve/reject 后，显式设
controller = null或从 Map 中 delete，避免悬空引用 - React 用户注意：useRef 保存 controller 是可行的，但需确保每次新请求都更新 ref，且 useEffect 清理函数里 abort（防组件卸载后 still pending）
中断不是魔法，它只作用于「尚未完成」的 fetch；如果请求早已返回，再调 abort() 就只是个空操作。真正要小心的，是信号没传进去、错误没分清、控制器生命周期没管住。
