AbortSignal.any 怎么合并超时和用户取消

前端请求同时受两种取消条件约束时，直接把一个 AbortController 传给 fetch 往往不够：用户点了取消要立即停止，接口超过预算也要自动结束。更稳妥的写法是分别创建用户信号和超时信号，再用 AbortSignal.any() 合成一个入口。任一输入先中止，组合信号就中止；捕获异常时再根据 reason 区分是用户取消还是超时。

先把两个取消来源拆开

用户取消属于交互意图，超时属于资源预算，它们的生命周期和提示文案并不相同。把两者分别保留，后面才能知道失败到底应该提示“已取消”还是“请求超时”。

// 用户操作只负责发出取消，不直接管理超时计时器
const userCancelController = new AbortController();

// 超时信号到时间后自动中止，时间单位是毫秒
const timeoutSignal = AbortSignal.timeout(8_000);

// 两个来源都保留，组合层只负责统一传递取消状态
const combinedSignal = AbortSignal.any([
  userCancelController.signal,
  timeoutSignal,
]);

这里的组合信号是给消费者使用的单一入口。它不会让 userCancelController 获得一个“组合后的 abort 方法”，因此需要取消时仍应调用原控制器：

// 点击取消按钮时，只中止用户自己的来源信号
cancelButton.addEventListener("click", () => {
  userCancelController.abort(new DOMException("用户取消", "AbortError"));
});

把组合信号传给 fetch

组合完成后，业务函数只接收一个 signal 参数，调用方可以在外层继续叠加页面关闭、路由切换等取消来源。下面的示例把网络请求、JSON 读取和错误处理放在同一条边界里。

async function loadReport(signal) {
  // fetch 只接收组合后的信号，避免在函数内部再造一个取消来源
  const response = await fetch("/api/report", { signal });
  if (!response.ok) {
    // HTTP 错误不是取消，保留状态码给上层处理
    throw new Error(`HTTP ${response.status}`);
  }
  // 读取响应体同样受 fetch 的 signal 约束
  return response.json();
}

loadReport(combinedSignal).catch((error) => {
  // 只在这里做用户可见的结果分类
  if (error.name === "AbortError") {
    console.info("用户主动取消");
  } else if (error.name === "TimeoutError") {
    console.warn("请求超过 8 秒预算");
  } else {
    console.error("网络或服务端错误", error);
  }
});

用 reason 判断到底是谁先取消

判断 error.name 能覆盖常见的 AbortError 和 TimeoutError，但在自定义业务原因时，组合信号上的 reason 更直接。规范语义是“第一个已经中止的输入原因”，不是最后一个完成清理的原因。

function describeCancellation(signal, error) {
  // 先看组合信号的 reason，保留最早的取消来源
  const reason = signal.reason;
  if (reason?.name === "TimeoutError") return "超时";
  if (reason?.name === "AbortError") return "用户取消";

  // 非取消异常不能被包装成取消，避免吞掉真实网络错误
  if (!signal.aborted) return `请求失败：${error.message}`;
  return "其他取消原因";
}

生命周期和兼容边界

有几个边界很容易被忽略。传入空数组时，返回信号不会自行中止；输入里若已有一个已中止信号，组合结果会立即中止；组合信号中止不会反向停止其他输入，也不会自动取消由 AbortSignal.timeout() 创建的计时器。若手动给组合信号加了监听器，请在请求结束后移除。

如果代码需要兼容没有 AbortSignal.any 的环境，可以在能力检测后使用项目已有的信号合并工具；降级实现要处理“输入已经中止”和监听器解绑这两个细节，不能只把多个 abort 事件转发到一个裸控制器。

相关问题

AbortSignal.any 会取消所有输入信号吗？

不会。它只返回一个依赖输入的组合信号；某个输入先中止后，组合信号随之中止，其他输入仍由各自的控制器或计时器管理。

为什么不直接给 fetch 传两个 signal？

fetch 的选项只接收一个 signal，所以需要先在调用边界组合多个来源。这样还能把取消原因和资源清理集中在一处处理。