1. 首页
  2. IT资讯

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

大家好 ! 👋

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

当我们用 Fetch 来管理数据时,有时我们想取消请求(例如,当我们离开当前页面时,当我们关闭模态框,…)。

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

7p2coedr8hhtdltuzxu1

7p2coedr8hhtdltuzxu1

4uoij0o2qmdlppeykeln

4uoij0o2qmdlppeykeln

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

❓为什么有内存泄漏?:我们有一个执行异步fetch(url)任务的组件,然后更新该组件的状态来显示元素,但是我们在请求完成之前就卸载(unmounted)了该组件。 由于已卸载组件的状态(例如 setUserssetState)被更新, 所以造成了此次内存泄露

🚀让我们使用新的 AbortController API!

Abort Controller 允许您订阅一个或多个Web请求,并具有取消请求的能力。 🔥

fvipu2xkelip28hcfoqp

现在,我们可以访问controller.signal

“ 具有 read-only属性的 AbortController接口返回一个AbortSignal (https://developer.mozilla.org… 对象实例,该实例可用于根据需要与DOM请求通信/中止它。” 来自MDN(https://developer.mozilla.org…

让我们看看如何使用它💪

vlvi82bo5lk2nopqzn8z

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

yswm5mktqv16v0tiio9e

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

是的,你刚刚学习了如何取消Web请求! 👏

🤩让我们用React Hooks做到这一点!

改造之前

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

466wuql2ru1fgkrc2snx

如果我们离开页面的速度太快而导致请求未完成:MEMORY LEAK

daavdtgn3tvfeybcf3rq

✅ 改造之后

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

zsr8g1ecnburui4rkje9

现在,不再有内存泄漏! 😍

wqa6uud2tnz90okxiy1e

 

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/200322.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code