AbortController 是 JavaScript 中用于主动中止 fetch 请求的核心工具，通过 signal 机制实现请求可取消，防止内存泄漏；调用 abort() 后 fetch Promise 以 AbortError 拒绝，signal 可复用但 abort 仅生效一次，适用于页面切换、搜索联想、超时控制等场景，需注意兼容性及错误显式处理。
AbortController 是 JavaScript 中用于主动中止 fetch 请求的核心工具，它通过 signal 机制让异步请求具备可取消能力，避免内存泄漏和无效响应处理。
AbortController 基本用法
创建 AbortController 实例后，将其 signal 传入 fetch 的 options 对象即可关联中断能力：
- 调用 controller.abort() 会立即终止正在发送或等待响应的请求
- fetch 返回的 Promise 会以 AbortError 拒绝（name 属性为 "AbortError"）
- signal 可复用，但 abort() 只能调用一次；重复调用无效果
结合实际场景使用 signal
常见于用户快速切换页面、输入搜索关键词频繁触发请求、或超时自动中断等情形：
- 在发起请求前检查 signal.aborted，提前跳过已中止的请求
- 配合 setTimeout 实现超时控制：到时调用 abort()，并在 catch 中区分 AbortError 和其他错误
- 多个 fetch 共享同一个 signal，一次 abort 可同时中止所有关联请求
注意兼容性与常见陷阱
现代浏览器普遍支持 AbortController（Chrome 66+、Firefox 57+、Safari 12.1+），但 Node.js 需 v15.4+ 原生支持；旧环境需 polyfill。
立即学习“Java免费学习笔记（深入）”；
- fetch 参数中的 signal 必须是 AbortSignal 实例，不能直接传 controller
- 中止后不可恢复，也不影响已返回的响应体流（如 ReadableStream）
- 若未监听 reject 或忽略 AbortError，可能掩盖真实业务错误，建议显式判断 error.name === 'AbortError'
React 中的典型实践示例
在组件卸载或依赖更新时及时中止请求，防止状态更新到已销毁的实例上：
- useEffect 内创建 controller，清理函数中调用 abort()
- 将 signal 传入 fetch，并在 then/catch 前检查 signal.aborted 避免冗余处理
- 自定义 Hook（如 useAbortableFetch）可封装通用逻辑，提升复用性
