正文：

在异步编程中，超时中断是一个高频需求场景。比如请求第三方API时，若响应时间超过3秒，系统应自动终止等待并执行降级逻辑。然而，JavaScript原生并未提供直接的“异步超时中断”机制，需要开发者通过组合API实现。本文将拆解三种主流方案，并分析其适用边界。

一、基础方案：Promise.race竞速机制

最基础的超时控制利用Promise.race，让目标异步任务与定时器Promise竞争：

function asyncWithTimeout(targetPromise, timeout) {
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => reject(new Error('Operation timed out')), timeout);
  });
  return Promise.race([targetPromise, timeoutPromise]);
}

// 示例：请求超时处理
const fetchData = fetch('https://api.example.com/data');
asyncWithTimeout(fetchData, 3000)
  .then(response => console.log('Success:', response))
  .catch(error => console.error('Failed:', error.message));

局限性：
1. 仅触发超时错误，无法真正中止原始请求（仍会占用网络带宽）；
2. 不适用于需要清理资源的场景（如取消文件读取）。

二、进阶方案：AbortController信号中断

现代浏览器提供的AbortController可真正终止异步操作。以下以Fetch API为例：

const controller = new AbortController();

async function fetchWithTimeout(url, timeout = 5000) {
  const timeoutId = setTimeout(() => controller.abort(), timeout);
  
  try {
    const response = await fetch(url, { signal: controller.signal });
    clearTimeout(timeoutId);
    return response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Request aborted due to timeout');
    } else {
      console.error('Other error:', error);
    }
  }
}

// 使用示例
fetchWithTimeout('https://api.example.com/slow-data')
  .then(data => console.log(data));

关键点：
1. 通过signal参数将控制器与请求绑定；
2. 调用abort()后，会触发AbortError，并终止网络请求。

兼容性注意：Node.js部分模块（如axios）也支持AbortController，但需确认版本。

三、通用方案：封装可取消的异步任务

对于非Fetch场景（如定时任务、WebSocket），可手动实现取消逻辑：

function cancellableAsyncTask(taskFn, onCancel) {
  let isCancelled = false;
  
  const taskPromise = new Promise(async (resolve, reject) => {
    try {
      const result = await taskFn();
      if (!isCancelled) resolve(result);
    } catch (error) {
      if (!isCancelled) reject(error);
    }
  });

  return {
    promise: taskPromise,
    cancel: () => {
      isCancelled = true;
      onCancel?.();
    }
  };
}

// 示例：模拟长时间运行任务
const { promise, cancel } = cancellableAsyncTask(
  async () => {
    await new Promise(resolve => setTimeout(resolve, 10000));
    return 'Task completed';
  },
  () => console.log('Cleanup resources...')
);

// 5秒后主动取消
setTimeout(() => cancel(), 5000);
promise.catch(console.error);

适用场景：
- 需要自定义清理逻辑（如关闭数据库连接）；
- 兼容旧版运行环境。

四、终极组合技：AbortSignal + Promise.race

结合两种方案的优势，实现更健壮的超时控制：

async function robustAsyncWithTimeout(fn, timeout, signal) {
  if (signal?.aborted) throw new Error('Already aborted');

  return new Promise((resolve, reject) => {
    const timeoutId = setTimeout(() => {
      reject(new Error('Timeout exceeded'));
    }, timeout);

    // 外部终止信号监听
    signal?.addEventListener('abort', () => {
      clearTimeout(timeoutId);
      reject(new DOMException('Aborted', 'AbortError'));
    });

    fn()
      .then(resolve)
      .catch(reject)
      .finally(() => clearTimeout(timeoutId));
  });
}

总结与选型建议

| 方案 | 适用场景 | 缺点 |
|---------------------|-------------------------|----------------------|
| Promise.race | 简单超时提示 | 无法中止底层操作 |
| AbortController | 网络请求、现代API | 浏览器兼容性要求 |
| 手动取消封装 | 复杂异步任务 | 需自行实现清理逻辑 |

实际开发中，推荐优先使用AbortController，并在必要时降级到手动封装方案。对于Node.js环境，可结合events模块模拟类似机制。