有關在 React 中創(chuàng)建自定義鉤子以跨所有組件使用 Fetch 的教程。
從版本 16.8 開始，React 鉤子被正式添加到 React.js。除了內(nèi)置的 Hooks 之外，我們還可以定義自己的 hook 來使用狀態(tài)和其他 React 特性，而無需編寫類。
當您的組件邏輯需要由多個組件使用時，我們可以將該邏輯提取到自定義掛鉤中。例如，如果您需要從不同組件中的服務器獲取數(shù)據(jù)，則必須在每個組件中編寫 fetch 函數(shù)，然后添加用于處理加載和錯誤狀態(tài)的狀態(tài)。我們不必在每個組件中放置 fetch，而是可以創(chuàng)建自定義鉤子并在任何地方重用它。
自定義鉤子以“use”前綴開頭。例如。useFetch
步驟1
讓我們創(chuàng)建一個新文件：useFetch.js
在導入我們的鉤子并像任何其他鉤子一樣使用它。這是我們傳入URL以從中獲取數(shù)據(jù)的地方?，F(xiàn)在我們可以在任何組件中重用這個自定義 Hook，從任何 URL 獲取數(shù)據(jù)。app.jsuseFetch
步驟2：添加加載/錯誤狀態(tài)
我們還可以添加附加參數(shù)和參數(shù)來指示數(shù)據(jù)是否正在獲取以及是否發(fā)生錯誤。loading error
用法：
步驟3：抓取“有什么”問題“？
讓我們再看一遍這個代碼塊：
一切似乎都很好，什么可能出錯?您幾乎可以在所有文章和視頻教程中找到此代碼塊。但我想在這里強調(diào)2點。如果：
首先：服務器返回無效的 JSON 字符串
接口 的方法 獲取 流并讀取它直到完成。它返回一個承諾，該承諾通過解析正文文本作為 的結果進行解析。json() Response Response JSON
在第(1)行上，我們使用json()函數(shù)解析響應，但是如果服務器返回字符串而不是JSON字符串，則此塊將引發(fā)錯誤。假設我們的服務器在響應中只返回“OK”文本。
res.status(200).send('OK')
在這種情況下，我們將獲得成功狀態(tài)，但我們的抓取將引發(fā)錯誤：
無效的 JSON 字符串
第二：捕獲服務器錯誤
如果服務器返回4xx或5xx狀態(tài)(例如404，500)，我們?nèi)詫⑥D(zhuǎn)到阻止而不是阻止。因為這就是提取請求的工作方式。thencatch
僅當發(fā)生網(wǎng)絡錯誤時，獲取承諾才會使用類型錯誤拒絕。由于 4xx 和 5xx 響應不是網(wǎng)絡錯誤，因此沒有什么可捕獲的。
解決這些錯誤
對于第一點，我們可以添加一個 try/catch 塊(用于和用于處理 Promise 中的錯誤的塊)，如果發(fā)生錯誤，我們可以從響應中返回文本值。async/awaitcatch
注意：我們在這里使用是因為我們可以使用或只能使用一次。否則，它將引發(fā)錯誤：clone json text
對于第二點(處理服務器錯誤)，我們需要檢查響應狀態(tài)(可以是或)。res.oktrue false
法典
最后的步驟
將我們的承諾鏈替換為異步/等待
添加類型腳本
添加重新獲取選項
有條件地獲取(不僅在組件裝載上)
再次調(diào)用自定義掛鉤的唯一方法是在掛鉤中添加依賴項，并將其從組件中更改。useEffect
例：假設每次單擊按鈕時都需要獲取數(shù)據(jù)。在按鈕單擊時，我們可以更改切換值，該值在useFetch鉤子中用作依賴項，數(shù)據(jù)將再次被提取。
現(xiàn)在一切似乎都很好，但是如果我們需要通過單擊按鈕而不是在組件安裝時加載數(shù)據(jù)來加載數(shù)據(jù)，該怎么辦?如果我們嘗試添加如下條件，它將引發(fā)錯誤。這是因為鉤子不能在條件下使用。此代碼錯誤 ↓
我們將收到此錯誤：
Rendered more hooks than during the previous render.
為了解決這個問題，我們可以將條件放在自定義鉤子中，而不是將其放在組件中。如果 提供了，值為 — 無需加載數(shù)據(jù)。refetchnull
例子
服務器返回一個字符串而不是 JSON。堆棧閃電戰(zhàn)演示
通過單擊按鈕重新獲取數(shù)據(jù)。堆棧閃電戰(zhàn)演示
在按鈕單擊而不是組件安裝時發(fā)出獲取請求。在這里，我們需要設置這將阻止在組件安裝時發(fā)送請求。param null
發(fā)出發(fā)布/放置請求
就是這樣。此外，我們還可以從自定義鉤子添加返回狀態(tài)代碼和錯誤消息。
您可以在此處找到源代碼，并在此處找到堆棧閃電戰(zhàn)示例。
京公網(wǎng)安備 11010802030320號