react取消所有请求_关于前端: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)

最初

欢送关注公众号 「秋风的笔记」，次要记录日常中感觉有意思的工具以及分享开发实际，放弃深度和专一度。

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