🍦 在 React Hooks 中正确取消 HTTP 请求并避免内存泄漏 🚨

大家好！👋

今天，我们来看看如何使用React Hooks 中的fetch和Abort Controller取消 Web 请求！🤗

当我们使用 Fetch 来管理数据时，有时我们想要取消请求（例如，当我们离开当前页面时，当我们离开模态时，...）。

在下面的示例中👇，我们在切换路由时获取要显示的数据。但是，我们在获取完成之前就离开了路由/页面。

我们刚刚看到了内存泄漏！💪🏼 让我们看看这个错误发生的原因，以及它到底意味着什么。

❓为什么会发生内存泄漏？：我们有一个组件执行异步fetch(url)任务，然后更新组件的状态以显示元素，但我们在请求完成之前就卸载了该组件。卸载的组件的状态被更新（例如setUsers）setState，从而导致内存泄漏。

🚀 让我们使用新的 AbortController API！

Abort Controller允许您订阅一个或多个 Web 请求，并可以取消它们。🔥

首先，让我们创建一个新的AbortController对象实例。

现在，我们可以访问了controller.signal。

该接口的signalread-only属性AbortController返回一个AbortSignal对象实例，该实例可用于根据需要与 DOM 请求进行通信或中止 DOM 请求。MDN来源

让我们看看如何使用它💪

最后，如果我们想取消当前请求，只需调用abort()。此外，您还可以获取controller.signal.aborted，它Boolean指示信号正在通信的请求是否已中止（true）或未中止（false）。

❗️ 注意：当abort()被调用时，fetch()承诺会以DOMException命名的方式拒绝AbortError。

是的，你刚刚学习了如何原生取消 Web 请求！👏

下面是检索数据并显示数据的组件示例：

如果我离开页面太快并且请求尚未完成：内存泄漏

因此，让我们useEffect订阅我们的fetch请求并避免内存泄漏。我们在组件卸载时useEffect调用clean 方法。abort()

现在，不再有内存泄漏！😍

与往常一样，欢迎随时联系我！😉

您可以在abort-with-react-hooks.vercel.app上查看此演示。
此外，本文的源代码也包含在gist中。

干杯🍻🍻🍻

如果您喜欢这篇文章，您可以在Twitter或dev.to上关注我，我会定期发布与 HTML、CSS 和 JavaScript 相关的简短技巧。