如何基于 AbortSignal.any 实现“用户取消”与“后端超时”双重异步信号监听-js教程-PHP中文网

可使用 abortsignal.any 合并多个 abortsignal 实现任意一个触发即中止异步操作；需分别创建用户取消信号和超时信号，用 abortsignal.any 合并后传入 fetch 的 signal 选项，并通过检查各原始信号的 aborted 状态区分中止原因。

如何基于 abortsignal.any 实现“用户取消”与“后端超时”双重异步信号监听

可以使用 AbortSignal.any 合并多个 AbortSignal，让任意一个触发就中止整个异步操作。关键在于：把用户主动取消（如点击取消按钮）和后端超时（如 fetch 超时）各自封装为独立的可中断信号，再用 AbortSignal.any 统一监听。

创建两个独立的 AbortSignal

一个来自用户交互（比如点击“取消”），另一个模拟后端超时（比如 5 秒无响应）：

用户取消信号：用 new AbortController() 创建，调用 abortController.abort() 触发
超时信号：用 AbortSignal.timeout(ms)（现代浏览器支持）或手动 setTimeout + abort() 模拟

用 AbortSignal.any 合并信号

AbortSignal.any([signalA, signalB]) 返回一个新的信号，只要其中任一源信号 abort，它就立即 abort：

const userSignal = new AbortController().signal;
const timeoutSignal = AbortSignal.timeout(5000);

const combinedSignal = AbortSignal.any([userSignal, timeoutSignal]);

注意：AbortSignal.any 是静态方法，返回的是只读信号（不可调用 abort()），适合传给 fetch 或自定义异步函数。

MakeSong

一款AI音频处理工具，主要用于AI音乐生成，生成高质量音乐，仅需30秒的时间，适合需要提升相关任务效率的用户。

下载

在 fetch 中统一使用合并后的信号

将 combinedSignal 传入 fetch 的 signal 选项，任一条件满足（用户点取消 / 超时）都会中止请求：

try {
  const res = await fetch('/api/data', { signal: combinedSignal });
  const data = await res.json();
} catch (err) {
  if (err.name === 'AbortError') {
    if (userSignal.aborted) {
      console.log('用户主动取消');
    } else if (timeoutSignal.aborted) {
      console.log('后端响应超时');
    }
  }
}

⚠️ 注意：不能仅靠 err.name === 'AbortError' 区分原因，需额外检查各原始信号的 aborted 状态（因为 AbortSignal.any 不暴露触发源）。

手动触发用户取消（例如绑定按钮）

把 AbortController 实例保存起来，点击时调用 abort()：

const userAbort = new AbortController();

document.getElementById('cancel-btn').addEventListener('click', () => {
  userAbort.abort();
});

然后在合并信号时用 userAbort.signal，确保用户操作能真正影响请求生命周期。