AbortSignal.any 返回一个只读合成信号，任一输入信号中止即触发，继承首个中止原因；空数组返回永不失效信号，已中止信号导致立即中止；需手动清理资源且不可重用。
AbortSignal.any 是浏览器中用于合并多个 AbortSignal 的实用方法，能让你同时响应用户主动取消（如点击取消按钮）和网络请求超时（如 fetch 超时）——只要其中任一信号触发 abort，合并后的 signal 就会进入中止状态。
理解 AbortSignal.any 的核心行为
它不创建新控制器，而是返回一个只读的合成 AbortSignal。该 signal 在任意传入的 signal 触发 abort 时立即中止，并继承所有关联的 abort 原因（reason）。注意：它不会自动清理资源，需自行处理中止逻辑。
- 传入空数组会返回始终未中止的 signal
- 传入已中止的 signal，返回的 signal 立即中止
- 若多个 signal 同时中止，取第一个触发的 reason（按传入顺序）
组合用户取消与超时信号的典型写法
先分别创建两个独立的 AbortController：一个由 UI 操作控制（如按钮点击），另一个由 setTimeout 自动触发 abort 实现超时。再用 AbortSignal.any 合并它们，传给 fetch：
const userController = new AbortController();
const timeoutController = new AbortController();
// 用户点击取消时中止
document.getElementById('cancel-btn').addEventListener('click', () => {
userController.abort('user-cancelled');
});
// 5 秒后自动中止
setTimeout(() => {
timeoutController.abort('timeout');
}, 5000);
// 合并信号
const combinedSignal = AbortSignal.any([
userController.signal,
timeoutController.signal
]);
// 发起请求
fetch('/api/data', { signal: combinedSignal })
.then(res => res.json())
.catch(err => {
if (err.name === 'AbortError') {
console.log('请求被中止，原因：', err.cause); // 可能是 'user-cancelled' 或 'timeout'
}
});
注意事项与常见陷阱
AbortSignal.any 返回的 signal 是“单次有效”的：一旦中止，无法重用；也不支持重新监听。若需重复使用，应每次新建 controller 并重新调用 any。
- 不要在合并前手动调用 abort() —— 这会导致 combinedSignal 立即中止，失去等待意义
- 避免将同一个 AbortController.signal 多次传入 any —— 不会报错但无实际增益
- 服务端若已返回部分响应，fetch 可能抛出 TypeError（如流已被 cancel），建议统一捕获 AbortError + network error
进阶：封装为可复用的超时+取消工具函数
把逻辑收拢成函数，提升复用性与可读性：
function cancellableFetch(input, init = {}) {
const userController = new AbortController();
const timeoutController = new AbortController();
const timeoutId = setTimeout(() => {
timeoutController.abort('timeout');
}, init.timeoutMs ?? 10000);
const signal = AbortSignal.any([
userController.signal,
timeoutController.signal
]);
// 清理定时器（即使提前中止也安全）
const cleanup = () => {
clearTimeout(timeoutId);
};
return {
promise: fetch(input, { ...init, signal }),
cancel: () => {
userController.abort('user-cancelled');
cleanup();
},
cleanup // 外部可选调用（例如组件卸载时）
};
}
// 使用示例
const req = cancellableFetch('/api/data', { timeoutMs: 8000 });
req.promise
.then(r => r.json())
.catch(err => {
if (err.name === 'AbortError') console.log('中止原因：', err.cause);
});
// 后续随时取消
document.querySelector('#cancel').onclick = () => req.cancel();
