These Advanced AbortController Features Are Amazing

核心内容

AbortController 不仅仅能取消 fetch 请求，它还有很多强大的功能几乎没人知道。本文深入探讨 AbortController 的高级特性。

关键亮点

1. AbortController 基础

const controller = new AbortController()
const signal = controller.signal

fetch("/api/data", { signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name === "AbortError") {
      console.log("Request was aborted")
    }
  })

controller.abort()

2. 事件监听器清理

AbortController 可以自动移除事件监听器，非常适合 React useEffect 清理：

useEffect(() => {
  const controller = new AbortController()
  const signal = controller.signal

  window.addEventListener("dragstart", () => {...}, { signal })
  window.addEventListener("dragend", () => {...}, { signal })

  return () => controller.abort() // 一次移除所有监听器
}, [])

3. AbortSignal.timeout()

自动超时信号，无需手动 setTimeout/clearTimeout：

const signal = AbortSignal.timeout(5000) // 5秒后自动中止
fetch("/api/slow-endpoint", { signal })

4. AbortSignal.any()

组合多个信号，任一中止即中止：

const signal = AbortSignal.any(
  controller.signal,
  AbortSignal.timeout(3000)
)

5. 自定义可中止函数

创建支持中止的自己的函数：

function doSomething(signal) {
  return new Promise((resolve, reject) => {
    if (signal.aborted) {
      reject(signal.reason)
      return
    }

    signal.addEventListener("abort", () => {
      clearTimeout(id)
      reject(signal.reason)
    })

    const id = setTimeout(() => resolve("Done"), 5000)
  })
}

实用价值

⭐⭐⭐⭐⭐ AbortController 是 JavaScript 中被低估的 API，这篇文章详细介绍了其高级功能，对于构建高质量的前端应用和库非常有帮助。特别推荐 React 开发者阅读，学习如何正确清理副作用。

探索时间: 2026-03-18 | 来源: Web Dev Simplified