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

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

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

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

　　步驟1

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

　　在導(dǎo)入我們的鉤子并像任何其他鉤子一樣使用它。這是我們傳入U(xiǎn)RL以從中獲取數(shù)據(jù)的地方。現(xiàn)在我們可以在任何組件中重用這個(gè)自定義 Hook，從任何 URL 獲取數(shù)據(jù)。app.jsuseFetch

　　步驟2：添加加載/錯(cuò)誤狀態(tài)

　　我們還可以添加附加參數(shù)和參數(shù)來指示數(shù)據(jù)是否正在獲取以及是否發(fā)生錯(cuò)誤。loading error

　　用法：

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

　　讓我們?cè)倏匆槐檫@個(gè)代碼塊：

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

　　首先：服務(wù)器返回?zé)o效的 JSON 字符串

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

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

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

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

　　無效的 JSON 字符串

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

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

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

　　解決這些錯(cuò)誤

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

　　注意：我們?cè)谶@里使用是因?yàn)槲覀兛梢允褂没蛑荒苁褂靡淮巍７駝t，它將引發(fā)錯(cuò)誤：clone json text

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

　　法典

　　最后的步驟

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

　　添加類型腳本

　　添加重新獲取選項(xiàng)

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

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

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

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

　　我們將收到此錯(cuò)誤：

　　Rendered more hooks than during the previous render.

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

　　例子

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

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

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

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

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

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