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();