怎么用 AbortController 取消 fetch 请求？

最常见的用法：搜索框取消旧请求

用户快速输入 a、ab、abc，会连发三个请求。如果 a 的请求最慢，它最后回来就会把 abc 的结果盖掉。解决办法是每次发新请求前，先把上一次的取消掉。

let controller = null

async function search(keyword) {
  controller?.abort() // 取消上一次还没回来的请求
  controller = new AbortController() // 一个 controller 只能用一次，每次都 new

  try {
    const res = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
      signal: controller.signal
    })
    render(await res.json())
  } catch (err) {
    if (err.name === 'AbortError') return // 主动取消的，不用提示用户
    showError(err)
  }
}

超时取消和批量取消

fetch 自己没有 timeout 参数，以前要自己写 setTimeout 加 abort。现在浏览器提供了现成的静态方法，一行就够。

try {
  const res = await fetch('/api/report', {
    signal: AbortSignal.timeout(5000) // 5 秒还没回来就自动取消
  })
} catch (err) {
  // 超时触发的错误名是 TimeoutError，不是 AbortError
  if (err.name === 'TimeoutError') showError('请求超时，请重试')
}

一个 signal 管多个请求

同一个 signal 可以同时传给好几个 fetch。比如一个页面同时拉了列表、详情、推荐三个接口，用户切走时调用一次 abort()，三个请求一起取消。React 里通常放在 useEffect 的清理函数里做：组件卸载时调用 controller.abort()，就不会出现「组件都没了，请求回来还在 setState」的情况。

让自己写的异步函数也支持取消

signal 不只 fetch 能用。自己封装的异步任务可以接收一个 signal，监听它的 abort 事件来停止工作，addEventListener 也支持传 signal，取消时自动移除监听。这样整条异步链路都能用同一个 controller 统一取消。

容易答错的地方

以为取消了，服务端就不处理了

abort 只是让浏览器断开连接、不再等响应。请求如果已经发到服务端，服务端大概率照常执行完。所以提交订单、扣款这类写操作，取消请求不等于操作没发生，防重复提交还是要靠按钮禁用、幂等 key 这些手段。

复用同一个 controller

controller 被 abort 过一次，它的 signal 就永久处于已取消状态。拿它再发请求，fetch 会立刻拒绝。每次新请求都要 new 一个新的 controller。

catch 里不区分错误类型

取消是正常业务行为，不该弹「网络错误」。catch 里先判断 err.name === 'AbortError'，是的话直接 return。

面试官还会怎么问？

把知识连起来