AbortController 是用于主动中止异步操作的信号机制，适用于搜索联想、轮询等需及时取消请求的场景；每次请求必须新建实例并传入 signal，清理时调用 abort()，React 中应在 useEffect 清理函数中执行。
AbortController 是什么，什么时候该用它
AbortController 不是 Promise 的替代品，而是用来主动中止正在运行的异步操作的信号机制。它在 fetch、XMLHttpRequest、setTimeout（需手动配合）、ReadableStream 等支持 signal 参数的 API 中起作用。如果你的页面有搜索联想、表单自动保存、轮询或图片懒加载，并且用户可能快速切换输入或离开页面，那就该用它——否则容易出现“响应回来时组件已卸载”或“旧请求覆盖新结果”的问题。
fetch 配合 AbortController 取消请求的正确写法
关键点不是“创建控制器”，而是“每次请求都新建一个控制器”，并确保 abort() 被及时调用。常见错误是复用同一个 AbortController 实例，导致后发起的请求被前一次的 abort() 干掉。
- 每次调用
fetch前，必须 new 一个新的AbortController - 把
controller.signal传给fetch的signal选项 - 取消时只调用
controller.abort()，不要重复 abort 同一个实例 - 如果用在 React 中，
useEffect清理函数里调用abort()是标准做法
function fetchData(query) {
const controller = new AbortController();
const signal = controller.signal;
fetch(`/api/search?q=${query}`, { signal })
.then(r => r.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
return;
}
throw err;
});
return () => controller.abort(); // 返回取消函数
}
// 使用示例：连续触发时，自动取消前一个
let cancelPrev = null;
input.addEventListener('input', e => {
cancelPrev?.();
cancelPrev = fetchData(e.target.value);
});
如何一键取消所有挂起请求（非全局，但实用）
浏览器没有全局 abort 所有 fetch 的机制，所以“一键取消所有”本质是：你得自己持有所有活跃的 AbortController 实例，并统一 abort 它们。不能依赖 document 或 window 级别的钩子，因为 fetch 不注册到任何全局列表里。
- 用一个数组（如
const pendingControllers = []）收集每个请求对应的controller - 发起请求时
pendingControllers.push(controller)，成功/失败后记得.splice()或用filter()清理 - “一键取消”就是遍历并调用每个
controller.abort()，然后清空数组 - 注意：已 resolve/reject 的请求，再 abort 无副作用；但已 abort 过的 controller 再 abort 会抛错，建议加
try/catch或标记状态
const pendingControllers = [];
function fetchWithTrack(url) {
const controller = new AbortController();
pendingControllers.push(controller);
return fetch(url, { signal: controller.signal })
.finally(() => {
const i = pendingControllers.indexOf(controller);
if (i > -1) pendingControllers.splice(i, 1);
});
}
function cancelAll() {
pendingControllers.forEach(c => {
try {
c.abort();
} catch (e) {
// 忽略 "AbortError: The operation was aborted." 以外的错误
}
});
pendingControllers.length = 0;
}
容易被忽略的兼容性和边界情况
AbortController 在现代浏览器中支持良好（Chrome 66+、Firefox 57+、Safari 12.1+），但 Node.js 直到 v15.4 才原生支持，且早期版本的 polyfill（如 abort-controller）不支持 fetch 的 signal 透传，只适用于手写逻辑。另外几个硬伤：
-
axios1.x 默认不识别signal，需升级到 1.2+ 或手动传cancelToken（已废弃）或用AbortController+adapter配置 -
XMLHttpRequest支持signal是较新特性，老项目若还用它，得靠xhr.abort()自己管理 - Service Worker 中的
fetch也支持signal，但主页面 abort 后，SW 里可能仍继续处理，需额外通信协调 - 真正“优雅”的取消，不只是中断网络层，还要清理副作用：比如清除定时器、暂停 Canvas 动画、释放
MediaRecorder等——这些都得你自己配对管理
最常被跳过的一步，是没检查 err.name === 'AbortError' 就直接报错或重试，结果把取消当成失败来兜底，反而掩盖了真实问题。
