AbortController 和 AbortSignal 是 JavaScript 中用于取消异步操作的原生机制，核心是通过 signal 主动控制执行逻辑而非 Promise 自身支持取消；需在任务执行中持续检测 signal.aborted 或监听 abort 事件，并及时清理资源。
AbortController 和 AbortSignal 是 JavaScript 中原生支持的取消异步操作的机制，适用于 fetch、setTimeout、自定义 Promise 等场景。关键在于：**不是 Promise 自身支持取消，而是通过 signal 监听中止信号，由调用方主动控制执行逻辑是否继续**。
理解核心协作关系
AbortController 是“控制器”，提供 abort() 方法；AbortSignal 是它对外暴露的只读“信号”，可被传入支持取消的 API（如 fetch）或手动监听。两者绑定，一个 controller 对应一个 signal。
常见误区：直接在 Promise.then 里检查 signal.aborted —— 这已晚了，操作早已完成。正确做法是在异步任务执行过程中**持续或适时检测 signal.aborted 状态，并提前退出**。
对 fetch 请求实现优雅取消
fetch 原生支持 signal，是最典型的使用场景：
立即学习“Java免费学习笔记（深入）”；
- 创建 AbortController 实例，取出其 signal
- 将 signal 作为 option 传入 fetch
- 在需要时调用 controller.abort()，fetch 会立即 reject 并抛出 DOMException: "AbortError"
示例：
const controller = new AbortController();
const { signal } = controller;
fetch('/api/data', { signal })
.then(res => res.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求已被取消');
} else {
console.error('其他错误:', err);
}
});
// 3 秒后取消（模拟用户离开页面或点击取消按钮）
setTimeout(() => controller.abort(), 3000);
为普通 Promise 手动添加取消能力
非标准 API（如自定义异步函数、轮询、定时任务）需手动集成 signal。核心是：在 Promise 内部定期检查 signal.aborted，一旦为 true 就清理资源并 reject。
- 用 signal.addEventListener('abort', ...) 监听中止事件（兼容性好，推荐）
- 或在循环/递归/定时器中每次迭代前检查 signal.aborted
- 务必调用 clearTimeout / clearInterval / cleanupFn 等释放资源
示例：带取消的轮询函数
function poll(url, signal, interval = 1000) {
return new Promise((resolve, reject) => {
const abortHandler = () => {
clearInterval(timer);
reject(new DOMException('Polling aborted', 'AbortError'));
};
signal.addEventListener('abort', abortHandler, { once: true });
const timer = setInterval(async () => {
try {
const res = await fetch(url, { signal });
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
resolve(data);
clearInterval(timer);
} catch (err) {
if (signal.aborted) return; // 已中止，不处理错误
console.warn('轮询失败，继续...', err);
}
}, interval);
});
}
// 使用
const controller = new AbortController();
poll('/api/status', controller.signal)
.then(console.log)
.catch(console.error);
// 可随时取消
controller.abort();
封装成可取消的 Promise 工厂（实用技巧）
把取消逻辑抽离，让任意异步操作变得“可取消”：
- 接收一个 executor 函数，该函数接受 (resolve, reject, signal) 三个参数
- 内部自动绑定 abort 事件，并在 abort 时 reject AbortError
- executor 中可自由使用 signal.aborted 或监听 abort 事件
简化版封装：
function cancellablePromise(executor) {
const controller = new AbortController();
const promise = new Promise((resolve, reject) => {
const onAbort = () => reject(new DOMException('Aborted', 'AbortError'));
controller.signal.addEventListener('abort', onAbort, { once: true });
executor(resolve, reject, controller.signal);
});
promise.cancel = () => controller.abort();
return promise;
}
// 使用
const task = cancellablePromise((resolve, reject, signal) => {
const id = setTimeout(() => {
if (!signal.aborted) resolve('done');
}, 2000);
signal.addEventListener('abort', () => clearTimeout(id), { once: true });
});
task.then(console.log).catch(console.error);
setTimeout(() => task.cancel(), 1000); // 1 秒后取消
不复杂但容易忽略：AbortSignal 不仅用于终止，还可配合 throwIfAborted()（现代环境支持）统一报错；多个 signal 可用 AbortSignal.any([...]) 实现“任一中止即取消”；React/Vue 等框架中，务必在组件卸载时调用 abort，避免状态更新到已销毁实例。
