前端异步请求中的 AbortSignal.any()

在前端开发中，我们经常需要取消正在执行的异步请求，例如：

• 用户切换页面时取消请求。
• 用户重复提交时取消上一次请求。
• 请求超时后主动终止操作。

传统方式通常需要手动管理 AbortController，而现代浏览器提供了 AbortSignal.any()，可以组合多个取消信号。

基本用法

const controller = new AbortController();

const timeoutSignal = AbortSignal.timeout(5000);

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

fetch('/api/data', { signal });

上面的代码表示，只要满足以下任意条件，请求就会被取消：

1. 手动调用 controller.abort()。
2. 请求超过 5 秒。

为什么值得使用？

以前需要监听多个 AbortSignal，再通过额外逻辑统一管理取消状态。

现在只需要使用 AbortSignal.any()，就能将多个取消条件组合成一个信号。

它还可以与 fetch、事件监听器等支持 AbortSignal 的 API 配合使用。

注意事项

• AbortSignal.any() 接收一个 AbortSignal 数组。
• 任意一个信号触发取消，组合信号就会取消。
• 现代浏览器支持，但旧环境可能需要兼容处理。

总结： AbortSignal.any() 让异步任务的取消逻辑更加简洁，尤其适合处理请求超时与用户主动取消相结合的场景。