AbortController 通过共享或独立 AbortSignal 控制请求中止：共享 signal 实现批量取消，独立 signal 支持按需取消部分请求；React 中结合 useEffect 清理函数可防卸载报错；高阶用法支持超时与手动取消组合。
AbortController 是 JavaScript 中用于中止 Fetch 请求（以及其他支持 abort 信号的 API）的核心工具。控制多个并发请求的中止，关键在于**复用同一个 AbortSignal**，或为每个请求单独创建但统一触发 abort() —— 前者更常见、更高效，适合“一键取消全部”场景；后者更灵活，适合按条件取消部分请求。
✅ 共享一个 AbortSignal：批量取消所有并发请求
这是最典型的做法：创建一个 AbortController，把它的 signal 传给所有 fetch 调用。只要调用一次 controller.abort()，所有正在等待响应的请求都会被中止。
示例：
const controller = new AbortController();
const { signal } = controller;
// 同时发起 3 个请求，都监听同一个 signal
const promises = [
fetch('/api/users', { signal }),
fetch('/api/posts', { signal }),
fetch('/api/comments', { signal })
];
Promise.allSettled(promises)
.then(results => {
results.forEach((result, i) => {
if (result.status === 'rejected' && result.reason.name === 'AbortError') {
console.log(`请求 ${i + 1} 已被中止`);
}
});
});
// 2 秒后取消全部请求
setTimeout(() => controller.abort(), 2000);
⚠️ 注意：fetch 在收到 abort 信号后会立即 reject 一个 AbortError，不会等待超时或网络失败。你需在 catch 或 Promise.allSettled 中识别它，避免误判为网络错误。
立即学习“Java免费学习笔记（深入）”；
✅ 按需取消部分请求：为每个请求配独立控制器（配合 Promise.race 或封装）
如果需要“只取消其中某几个”，比如用户关闭了某个卡片，只需中止对应数据请求，那就应为每个请求创建独立的 AbortController。
常用做法是封装请求函数，返回可取消的 Promise：
function cancellableFetch(url, options = {}) {
const controller = new AbortController();
const promise = fetch(url, { ...options, signal: controller.signal });
return {
promise,
cancel: () => controller.abort()
};
}
// 使用
const req1 = cancellableFetch('/api/user/1');
const req2 = cancellableFetch('/api/user/2');
const req3 = cancellableFetch('/api/user/3');
// 只取消第二个
req2.cancel();
// 等待其余两个
Promise.all([req1.promise, req3.promise])
.then(([res1, res3]) => console.log('完成:', res1, res3));
这样每个请求生命周期独立，互不影响。
✅ 结合实际场景：React 中取消组件卸载时的请求
在 React 组件中发起请求，常需在组件 unmount 时自动取消，防止 setState on unmounted component 报错。利用 useEffect 的清理函数即可：
useEffect(() => {
const controller = new AbortController();
async function loadData() {
try {
const res = await fetch('/api/data', { signal: controller.signal });
const data = await res.json();
setData(data);
} catch (err) {
if (err.name !== 'AbortError') {
setError(err.message);
}
}
}
loadData();
// 组件卸载时中止请求
return () => controller.abort();
}, []);
✅ 这里即使有多个 fetch（比如串行加载），也可共用同一 signal；若需并行且各自独立控制，再拆成多个 controller。
✅ 高级技巧：组合多个 signal（如超时 + 手动取消）
原生 AbortSignal 不支持直接合并，但可用 AbortController + Promise.race 实现“任一条件触发即中止”：
- 创建主 controller 用于手动取消
- 另起一个定时器 controller 用于超时
- 用
AbortSignal.any([signal1, signal2])（Chrome 115+ / Firefox 117+ 支持）或 polyfill 方式组合
兼容写法（无需 any）：
const mainController = new AbortController();
const timeoutController = new AbortController();
// 5 秒后触发超时
setTimeout(() => timeoutController.abort(), 5000);
// 组合 signal：任一 abort 就生效
const combinedSignal = new AbortController();
const { signal: combinedSignalRef } = combinedSignal;
// 监听两个 signal 的 abort 事件
[mainController.signal, timeoutController.signal].forEach(sig => {
sig.addEventListener('abort', () => combinedSignal.abort(), { once: true });
});
// 发起请求时传入 combinedSignalRef
fetch('/api/slow', { signal: combinedSignalRef });
AbortController 控制多请求中止不复杂，核心就两条：共享 signal 实现批量取消，独立 signal 实现精细控制。选哪种取决于你的取消粒度需求。
