前端中的 AbortSignal.any()：合并多个取消信号

在前端开发中，AbortController 经常用于取消 fetch 请求。但当一个请求需要同时响应多个取消条件时，传统写法就比较繁琐。

例如：

• 用户主动取消请求
• 请求超时
• 页面组件卸载

这时候可以使用 AbortSignal.any()。

1. 基本用法

AbortSignal.any() 可以将多个 AbortSignal 合并成一个信号，只要其中任意一个被触发，合并后的信号就会被取消。

const controller = new AbortController();

const timeoutSignal = AbortSignal.timeout(5000);

const signal = AbortSignal.any([
  controller.signal,
  timeoutSignal
]);

fetch('/api/user', { signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === 'AbortError' || err.name === 'TimeoutError') {
      console.log('请求已取消或超时');
    }
  });

// 用户主动取消
controller.abort();

2. 实际应用场景

假设一个搜索请求需要满足以下条件：

1. 用户输入新内容时，取消上一次请求。
2. 请求超过 5 秒自动取消。
3. 页面离开时取消请求。

可以通过 AbortSignal.any() 将这些条件组合起来，避免维护复杂的取消逻辑。

3. 注意事项

• AbortSignal.any() 需要现代浏览器支持。
• AbortSignal.timeout() 可以直接创建超时信号。
• 合并后的 Signal 无法单独取消，需要取消其中一个源 Signal。

总结

AbortSignal.any() 让多个异步取消条件可以组合使用，特别适合处理请求超时、用户取消和组件生命周期等场景，能够有效简化异步请求管理。