React Hooks中這樣寫HTTP請求可以避免內(nèi)存泄漏

譯文來自 https://dev.to/somedood/best-practices-for-es2017-asynchronous-functions-async-await-39ji

原作者 Victor de la Fouchardière

譯者: 藍(lán)色的秋風(fēng)(github/hua1995116)

大家好 ！??

今天，讓我們看一下在 React Hooks 中使用 fetch 和Abort Controller取消Web請求從而來避免內(nèi)存泄露！??

當(dāng)我們用 Fetch 來管理數(shù)據(jù)時，有時我們想取消請求（例如，當(dāng)我們離開當(dāng)前頁面時，當(dāng)我們關(guān)閉模態(tài)框，...）。

在??下面的示例中，我們要在切換路由的時候獲取并展示數(shù)據(jù)。但是，我們在獲取數(shù)據(jù)完畢之前就離開了路由/頁面。

我們剛剛看到了一個內(nèi)存泄漏!讓我們看看為什么會出現(xiàn)這個錯誤，以及它的具體含義。

?為什么有內(nèi)存泄漏？：我們有一個執(zhí)行異步fetch(url)任務(wù)的組件，然后更新該組件的狀態(tài)來顯示元素，但是我們在請求完成之前就卸載(unmounted)了該組件。由于已卸載組件的狀態(tài)（例如 setUsers，setState）被更新, 所以造成了此次內(nèi)存泄露。

??讓我們使用新的 AbortController API！

Abort Controller 允許您訂閱一個或多個Web請求，并具有取消請求的能力。??

現(xiàn)在，我們可以訪問controller.signal。

“ 具有 read-only屬性的 AbortController接口返回一個AbortSignal (https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) 對象實(shí)例，該實(shí)例可用于根據(jù)需要與DOM請求通信/中止它。”   來自MDN（https://developer.mozilla.org/en-US/docs/Web/API/AbortController）

讓我們看看如何使用它??

最后，如果我們想取消當(dāng)前請求，只需調(diào)用abort()。另外，你可以獲取controller.signal.aborted，它是一個只讀屬性，它返回一個??Boolean表示與DOM通訊的信號是(true)否(false)已被放棄。

??注意：調(diào)用abort()時，fetch() promise 會以名為AbortError 的 DOMException reject。

是的，你剛剛學(xué)習(xí)了如何取消Web請求！??

??讓我們用React Hooks做到這一點(diǎn)！

?改造之前

下面是一個組件示例，它請求數(shù)據(jù)并展示它們。

如果我們離開頁面的速度太快而導(dǎo)致請求未完成：MEMORY LEAK

? 改造之后

我們使用 useEffect 來訂閱我們的 fetch 請求來避免內(nèi)存泄漏。當(dāng)組件卸載(unmounted)時，我們使用useEffect的清理方法來調(diào)用abort()。

現(xiàn)在，不再有內(nèi)存泄漏！??

你可以在 https://abort-with-react-hooks.vercel.app/ 上查看此演示。

可以在 https://github.com/hua1995116/node-demo/react-abort 查看源碼

干杯 ?? ?? ??