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)

最後

歡迎關注公衆號 「秋風的筆記」，主要記錄平常中以爲有意思的工具以及分享開發實踐，保持深度和專一度。

也能夠掃碼加我微信好友，進交流羣。