有關在 React 中創建自定義鉤子以跨所有組件使用 Fetch 的教程。

　　從版本 16.8 開始，React 鉤子被正式添加到 React.js。除了內置的 Hooks 之外，我們還可以定義自己的 hook 來使用狀態和其他 React 特性，而無需編寫類。

　　當您的組件邏輯需要由多個組件使用時，我們可以將該邏輯提取到自定義掛鉤中。例如，如果您需要從不同組件中的服務器獲取數據，則必須在每個組件中編寫 fetch 函數，然后添加用于處理加載和錯誤狀態的狀態。我們不必在每個組件中放置 fetch，而是可以創建自定義鉤子并在任何地方重用它。

　　自定義鉤子以“use”前綴開頭。例如。useFetch

　　步驟1

　　讓我們創建一個新文件：useFetch.js

　　在導入我們的鉤子并像任何其他鉤子一樣使用它。這是我們傳入URL以從中獲取數據的地方。現在我們可以在任何組件中重用這個自定義 Hook，從任何 URL 獲取數據。app.jsuseFetch

　　步驟2：添加加載/錯誤狀態

　　我們還可以添加附加參數和參數來指示數據是否正在獲取以及是否發生錯誤。loading error

　　用法：

　　步驟3：抓取“有什么”問題“？

　　讓我們再看一遍這個代碼塊：

　　一切似乎都很好，什么可能出錯?您幾乎可以在所有文章和視頻教程中找到此代碼塊。但我想在這里強調2點。如果：

　　首先：服務器返回無效的 JSON 字符串

　　接口 的方法 獲取 流并讀取它直到完成。它返回一個承諾，該承諾通過解析正文文本作為 的結果進行解析。json() Response Response JSON

　　在第(1)行上，我們使用json()函數解析響應，但是如果服務器返回字符串而不是JSON字符串，則此塊將引發錯誤。假設我們的服務器在響應中只返回“OK”文本。

　　res.status(200).send('OK')

　　在這種情況下，我們將獲得成功狀態，但我們的抓取將引發錯誤：

　　無效的 JSON 字符串

　　第二：捕獲服務器錯誤

　　如果服務器返回4xx或5xx狀態(例如404，500)，我們仍將轉到阻止而不是阻止。因為這就是提取請求的工作方式。thencatch

　　僅當發生網絡錯誤時，獲取承諾才會使用類型錯誤拒絕。由于 4xx 和 5xx 響應不是網絡錯誤，因此沒有什么可捕獲的。

　　解決這些錯誤

　　對于第一點，我們可以添加一個 try/catch 塊(用于和用于處理 Promise 中的錯誤的塊)，如果發生錯誤，我們可以從響應中返回文本值。async/awaitcatch

　　注意：我們在這里使用是因為我們可以使用或只能使用一次。否則，它將引發錯誤：clone json text

　　對于第二點(處理服務器錯誤)，我們需要檢查響應狀態(可以是或)。res.oktrue false

　　法典

　　最后的步驟

　　將我們的承諾鏈替換為異步/等待

　　添加類型腳本

　　添加重新獲取選項

　　有條件地獲取(不僅在組件裝載上)

　　再次調用自定義掛鉤的唯一方法是在掛鉤中添加依賴項，并將其從組件中更改。useEffect

　　例：假設每次單擊按鈕時都需要獲取數據。在按鈕單擊時，我們可以更改切換值，該值在useFetch鉤子中用作依賴項，數據將再次被提取。

　　現在一切似乎都很好，但是如果我們需要通過單擊按鈕而不是在組件安裝時加載數據來加載數據，該怎么辦?如果我們嘗試添加如下條件，它將引發錯誤。這是因為鉤子不能在條件下使用。此代碼錯誤 ↓

　　我們將收到此錯誤：

　　Rendered more hooks than during the previous render.

　　為了解決這個問題，我們可以將條件放在自定義鉤子中，而不是將其放在組件中。如果 提供了，值為 — 無需加載數據。refetchnull

　　例子

　　服務器返回一個字符串而不是 JSON。堆棧閃電戰演示

　　通過單擊按鈕重新獲取數據。堆棧閃電戰演示

　　在按鈕單擊而不是組件安裝時發出獲取請求。在這里，我們需要設置這將阻止在組件安裝時發送請求。param null

　　發出發布/放置請求

　　就是這樣。此外，我們還可以從自定義鉤子添加返回狀態代碼和錯誤消息。

　　您可以在此處找到源代碼，并在此處找到堆棧閃電戰示例。