使用 React AbortController 解决竞态条件问题

用户在 Web 应用中的操作速度很快。这种速度给开发者带来了两个主要问题。

第一个问题是“组件已卸载”陷阱（unmounted component trap）。用户点击按钮获取数据，请求需要四秒钟。但在两秒后，用户点击返回并离开了页面。请求仍在后台继续运行。当数据到达时，代码尝试更新一个已不存在的组件，从而导致内存泄漏。

第二个问题是竞态条件（race condition）。这在搜索栏中经常发生。

  • 用户输入 "A"。请求 1 开始。
  • 用户输入 "AB"。请求 2 开始。
  • 请求 2 先完成并显示正确的数据。
  • 请求 1 延迟完成，并用旧数据覆盖了屏幕。

你可以使用 AbortController API 来解决这两个问题。这个工具允许你在不再需要某个网络请求时将其停止。

如何实现：

  • 在 useEffect 内部创建一个新的 AbortController。
  • 将 controller 的 signal 传递给你的 fetch 请求。
  • 使用 try/catch 块来处理错误。
  • 检查错误名称是否为 AbortError，以忽略有意的取消操作。
  • 在 useEffect 中返回一个清理函数（cleanup function）来调用 controller.abort()。

这种模式适用于组件卸载或依赖项发生变化的情况。

这种方法的优势：

  • 防止过时的数据覆盖新数据。
  • 防止 React 应用中的内存泄漏。
  • 释放浏览器的网络连接。
  • 让你的应用程序保持可预测性和稳定性。

来源：https://dev.to/iprajapatiparesh/stop-race-conditions-react-abortcontrollers-2899