如何结合AbortController与AbortSignal实现请求的双重控制？

你可以通过AbortSignal.any()方法将手动中止控制器的信号和超时信号合并，无需手动编写setTimeout逻辑，就能同时实现自动超时中止和手动主动中止两种功能。

实现代码示例 #

// 创建手动中止控制器，用于主动终止请求
const abortController = new AbortController();
// 创建10秒超时的自动中止信号
const timeoutSignal = AbortSignal.timeout(10 * 1000);

// 合并两个信号：任意一个触发中止，都会终止fetch请求
const combinedSignal = AbortSignal.any([abortController.signal, timeoutSignal]);

try {
  const response = await fetch(url, {
    signal: combinedSignal
  });
  // 正常处理请求响应
  const data = await response.json();
  console.log('请求成功:', data);
} catch (error) {
  if (error.name === 'AbortError') {
    // 区分中止原因：超时还是手动触发
    if (timeoutSignal.aborted) {
      console.log('请求超时自动中止');
    } else if (abortController.signal.aborted) {
      console.log('请求被手动中止');
    }
  } else {
    // 处理网络错误等其他异常
    console.error('请求失败:', error);
  }
}

// 在代码任意位置调用，即可手动中止请求
// abortController.abort();

原理说明 #

AbortSignal.any()会创建一个新的AbortSignal实例，当传入的信号数组中任意一个信号触发中止时，这个新信号就会触发中止。这样既保留了AbortSignal.timeout()的简洁超时能力，又能通过AbortController在代码任意位置主动控制请求的中止。

内容的提问来源于stack exchange，提问作者Alex