React 怎么用 AbortController 取消 fetch 请求？

Question

仓乃文 · Accepted Answer

组件卸载或参数变化时，正在进行的 fetch 请求应该被取消，避免浪费带宽和卸载后 setState。AbortController 是浏览器原生 API，fetch 原生支持。

取消单个请求：
```javascript
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    const controller = new AbortController();
    fetch(`/api/users/${userId}`, { signal: controller.signal })
      .then((res) => res.json())
      .then((data) => setUser(data))
      .catch((err) => {
        if (err.name === "AbortError") return;  // 取消的请求不报错
        throw err;
      });
    return () => controller.abort();  // 卸载或 userId 变化时取消
  }, [userId]);
}
```

取消多个请求：
```javascript
useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;
  Promise.all([
    fetch("/api/user", { signal }).then((r) => r.json()),
    fetch("/api/posts", { signal }).then((r) => r.json()),
  ]).then(([user, posts]) => {
    setUser(user);
    setPosts(posts);
  });
  return () => controller.abort();  // 一个 controller 取消所有请求
}, []);
```

补充说明：
- controller.abort() 后，fetch 的 Promise 会 reject 一个 AbortError
- 一个 AbortController 只能 abort 一次，新的请求需要创建新的 controller
- axios 也支持 AbortController：axios.get(url, { signal })
- Node.js 15+ 的 fetch 也支持 AbortController
- 配合 cleanup 标记（let ignored = false）双保险更稳妥