React Hooks中取消HTTP请求来避免内存泄漏

你们好 ！ 👋

今天，让咱们看一下在 React Hooks 中使用 fetch 和Abort Controller取消Web请求从而来避免内存泄露！ 🤗

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

在👇下面的示例中，咱们要在切换路由的时候获取并展现数据。 可是，咱们在获取数据完毕以前就离开了路由/页面。

7p2coedr8hhtdltuzxu1

4uoij0o2qmdlppeykeln

咱们刚刚看到了一个内存泄漏!让咱们看看为何会出现这个错误，以及它的具体含义。

❓为何有内存泄漏？：咱们有一个执行异步fetch(url)任务的组件，而后更新该组件的状态来显示元素，可是咱们在请求完成以前就卸载(unmounted)了该组件。 因为已卸载组件的状态（例如 setUsers，setState）被更新, 因此形成了这次内存泄露。

🚀让咱们使用新的 AbortController API！

Abort Controller 容许您订阅一个或多个Web请求，并具备取消请求的能力。 🔥

如今，咱们能够访问controller.signal。

“ 具备 read-only属性的 AbortController接口返回一个 AbortSignal ( https://developer.mozilla.org... 对象实例，该实例可用于根据须要与DOM请求通讯/停止它。” 来自MDN（ https://developer.mozilla.org...）

让咱们看看如何使用它💪

最后，若是咱们想取消当前请求，只需调用abort()。 另外，你能够获取controller.signal.aborted，它是一个只读属性，它返回一个Boolean表示与DOM通信的信号是(true)否(false)已被放弃。

❗️注意：调用 abort()时， fetch() promise 会以名为AbortError 的 DOMException reject。

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

🤩让咱们用React Hooks作到这一点！

❌改造以前

下面是一个组件示例，它请求数据并展现它们。

若是咱们离开页面的速度太快而致使请求未完成：MEMORY LEAK

✅ 改造以后

咱们使用 useEffect 来订阅咱们的 fetch 请求来避免内存泄漏。 当组件卸载(unmounted)时，咱们使用useEffect的清理方法来调用abort()。

如今，再也不有内存泄漏！ 😍

你能够在 https://abort-with-react-hook... 上查看此演示。

能够在 https://github.com/hua1995116... 查看源码

干杯 🍻 🍻 🍻

译文来自 https://dev.to/somedood/best-...

译者: 秋风的笔记(github/hua1995116)

最后

欢迎关注公众号 「秋风的笔记」，主要记录平常中以为有意思的工具以及分享开发实践，保持深度和专一度。

也能够扫码加我微信好友，进交流群。