有關(guān)在 React 中創(chuàng)建自定義鉤子以跨所有組件使用 Fetch 的教程。

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

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

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

　　步驟1

　　讓我們創(chuàng)建一個新文件：useFetch.js

　　在導(dǎo)入我們的鉤子并像任何其他鉤子一樣使用它。這是我們傳入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點。如果：

　　首先：服務(wù)器返回無效的 JSON 字符串

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

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

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

　　在這種情況下，我們將獲得成功狀態(tài)，但我們的抓取將引發(fā)錯誤：

　　無效的 JSON 字符串

　　第二：捕獲服務(wù)器錯誤

　　如果服務(wù)器返回4xx或5xx狀態(tài)(例如404，500)，我們?nèi)詫⑥D(zhuǎn)到阻止而不是阻止。因為這就是提取請求的工作方式。thencatch

　　僅當發(fā)生網(wǎng)絡(luò)錯誤時，獲取承諾才會使用類型錯誤拒絕。由于 4xx 和 5xx 響應(yīng)不是網(wǎng)絡(luò)錯誤，因此沒有什么可捕獲的。

　　解決這些錯誤

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

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

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

　　法典

　　最后的步驟

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

　　添加類型腳本

　　添加重新獲取選項

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

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

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

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

　　我們將收到此錯誤：

　　Rendered more hooks than during the previous render.

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

　　例子

　　服務(wù)器返回一個字符串而不是 JSON。堆棧閃電戰(zhàn)演示

　　通過單擊按鈕重新獲取數(shù)據(jù)。堆棧閃電戰(zhàn)演示

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

　　發(fā)出發(fā)布/放置請求

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

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