用AbortController取消异步请求的正确姿势，你掌握了吗？

你有没有遇到过这种情况：搜索框里刚敲完关键词，请求发出去了，用户又改了输入，结果旧请求的响应后到，直接把新结果覆盖了。或者组件已经卸载，请求才慢悠悠回来，控制台弹出一句 `Can't perform a React state update on an unmounted component`。很多人第一反应是加个 `isMounted` 标志位，但原生 `AbortController` 才是更优雅的解法。

`AbortController` 并不复杂，真正难的是把它用对地方、用对姿势。下面我们从基础用法说到几个高频场景，看看你是不是真的掌握了。

基础用法：一个最小示例

`AbortController` 提供一个 `signal` 属性和一个 `abort()` 方法。把 `signal` 传给 `fetch`、`axios` 等支持它的异步操作，调用 `abort()` 就能取消。

const controller = new AbortController();

fetch('/api/search?q=' + keyword, { signal: controller.signal })
  .then(res => res.json())
  .then(data => render(data))
  .catch(err => {
    if (err.name === 'AbortError') return;
    console.error(err);
  });

// 需要取消时
controller.abort();

注意：`abort()` 之后，这个 `signal` 就进入 `aborted` 状态，不可重置。同一个 controller 不能拿来发第二个请求，必须新建。

正确姿势一：区分“取消”和“真实异常”

很多人把 `catch` 里所有错误都上报监控，结果取消也被算成了错误。正确做法是判断 `err.name === 'AbortError'` 或 `err.code === 20`。对于 `fetch`，取消会 reject 一个 `AbortError`；如果不处理，控制台会看到未捕获的 Promise rejection。

取消是预期行为，不该打扰用户，也不该污染错误监控。所以：

.catch(err => {
  if (err.name === 'AbortError') return; // 静默处理
  reportError(err); // 只有真实异常才上报
});

正确姿势二：组件卸载和依赖变化时取消

React 的 `useEffect` 里最典型：

useEffect(() => {
  const controller = new AbortController();

  fetch(url, { signal: controller.signal })
    .then(res => res.json())
    .then(setData)
    .catch(err => {
      if (err.name !== 'AbortError') throw err;
    });

  return () => controller.abort();
}, [url]);

Vue 的 `onUnmounted` 同理。这样既避免了内存泄漏，也避免了无效的状态更新。

正确姿势三：竞态请求只保留最后一次

搜索联想场景，每次输入都发请求，必须取消上一个。可以用一个变量保存 controller：

let controller;

async function search(keyword) {
  controller?.abort();
  controller = new AbortController();

  try {
    const res = await fetch(`/api/search?q=${keyword}`, {
      signal: controller.signal
    });
    const data = await res.json();
    render(data);
  } catch (err) {
    if (err.name !== 'AbortError') throw err;
  }
}

这样只有最后一次请求能真正渲染，前面被取消的请求不会污染 UI。

正确姿势四：超时与组合信号

`AbortSignal.timeout(5000)` 可以创建一个超时信号：

fetch(url, { signal: AbortSignal.timeout(5000) });

如果需要同时支持“用户手动取消”和“超时自动取消”，可以用 `AbortSignal.any([controller.signal, AbortSignal.timeout(5000)])`，不过这个 API 较新，注意兼容性。或者自己封装一个 `setTimeout` 调用 `abort()`。

常见坑，踩过的人不少

1. 复用同一个 `signal` 给多个请求，一次 `abort` 会全部取消。每个请求应该有自己的 controller。
2. `abort` 后继续用同一个 `signal` 发请求，会立即取消。必须新建。
3. 在 `axios` 中，从 v0.22 开始支持 `signal`，直接在 config 里传 `signal` 即可。旧版 `cancelToken` 已经废弃，建议统一用 `signal`。
4. `abort` 不保证请求没发出去，只是不再处理响应。服务端可能仍然收到请求，所以取消不等于“回滚”。
5. 取消后别忘了把 loading 状态置为 false，否则界面可能一直转圈。

总结

`AbortController` 的 API 很简单，难的是养成“请求与生命周期绑定”的意识。取消不是异常，而是正常的控制流。把 `AbortError` 单独处理，在组件卸载、依赖变化、新请求覆盖旧请求时主动 `abort`，代码会健壮很多。下次写异步请求时，先问自己一句：这个请求需要能被取消吗？如果答案是肯定的，`AbortController` 就该出场了。