一、前言

數據獲取是任何?react?應用程序的核心方面。對于 React 開發人員來說，了解不同的數據獲取方法以及哪些用例最適合他們很重要。

但首先，讓我們了解 JavaScript Promises。

簡而言之，promise 是一個 JavaScript 對象，它將在未來的某個時間產生一個值。這通常適用于異步操作（例如數據獲取）。

Promises具有三種狀態：

• Pending：承諾仍在進行中的地方
• Fulfilled：承諾成功解決并返回值的地方
• Rejected：承諾因錯誤而失敗

如果一個promise被Fulfilled或Rejected，它就被解決了。Promise 有不同的方法來根據結果做不同的事情。下一節將更詳細地討論這些方法。

二、使用 Promise 方法獲取?api

Fetch API 提供了一個全局的 fetch() 方法，使開發人員能夠以直接的方式獲取數據。在 fetch() 之前，傳統方法是使用 XMLHttpRequest()。（本文不涉及此方法，因為 fetch() 已被更強大、更靈活的功能集所取代。）

fetch() 方法接受一個參數，即要請求的 URL，并返回一個promise。第二個可選參數options 是一個屬性數組。fetch() 的返回值可以是 JSON 或 XML（對象數組或單個對象）。如果沒有選項參數，fetch() 將始終發出 GET 請求。

第一種方法是您通常會在簡單的數據獲取用例中看到的方法，并且通常是瀏覽 API 文檔時的第一個結果。

如前所述，我們從返回狗的隨機圖像的 API 獲取數據，并將該圖像呈現在屏幕上。在發出請求之前，我們將代碼包裝在一個帶有空依賴項數組的 useEffecthook 中，以便 fetch() 方法僅在組件最初安裝時運行。

useEffect(() => {fetch(URL)// syntax for handling promises.then((res) => {// check to see if response is okayif (res.ok) {// if okay, take JSON and parse to JavaScript objectreturn res.json();}throw res;})//  .json() returns a promise as well.then((data) => {console.log(data);// setting response as the data statesetData(data);})// if res is not okay the res is thrown here for error.catch((err) => {console.error(`Error: ${err}`);// setting the error statesetError(err);})//  regardless if promise resolves successfully or not we remove loading state.finally(() => {setLoading ( false );});}, []);

在上例中，我們調用該方法并傳入 API 端點的 URL。在這個方法中，我們使用 promise 對象的方法（回想一下返回一個 promise）。

我們使用這個方法并傳入一個回調函數來檢查響應是否正常。如果響應正常，我們將獲取返回的 JSON 數據并使用該方法將其解析為 JavaScript 對象。如果響應不正常，我們就會報錯。

由于 .json() 方法也返回一個承諾，我們可以鏈接另一個 .then() 并傳遞一個函數來設置數據的狀態，然后在組件的其他地方使用。在我們的示例中，外部 API 返回一個具有 url 屬性的對象（它將用作 srcour 圖像）。

繼續通過鏈，下一部分是 .catch() 以安排在承諾被拒絕時調用的函數。這也返回另一個承諾，然后我們可以鏈接 .finally() 無論承諾是否已解決（解決或拒絕），它都會被調用。

這種 .finally() 方法使我們能夠避免在 .then() 和 .catch() 中重復代碼，使其成為我們示例中刪除加載狀態的好地方。

三、帶有 Promise 方法的庫 Axios

Axios 是一個流行的 HTTP 客戶端庫，用于高效的數據獲取。它可以通過?npm?或其他包管理器輕松安裝到 React 應用程序中。使用 Axios 是 Fetch API 的替代方法，如果您不介意安裝外部庫，它有一些優勢。

第二個示例將非常接近第一個示例的代碼，使用相同的 promise 方法來處理 promise 狀態和響應。

在 fetch() 將 Axios 庫導入我們的組件之后，我們可以使用 axios.get() 一種可以將 URL 傳遞到我們的外部 API 端點的方法。

這將返回一個 Promise，因此我們可以采用與 Promise 方法鏈接相同的方法。

useEffect(() => {axios.get(URL)// syntax for handling promises.then((res) => {console.log(res.data);// axios converts json to object for us (shortens our code)setData(res.data);})// axios takes care of error handling for us instead of checking manually.catch((err) => {console.error(`Error: ${err}`);// setting the error statesetError(err);})//  regardless if promise resolves successfully or not we remove loading state.finally(() => {setLoading ( false );});}, []);

Fetch API 的代碼與此 Axios 方法之間的明顯區別在于，使用 Axios 我們只需要一個，因為 Axios 為我們將 .then()JSON 轉換為 JavaScript 對象（縮短了我們的代碼）。

另外，我們不再寫條件來手動拋出錯誤，因為axios會為你拋出400和500范圍的錯誤（再次縮短我們的代碼）。

四、異步函數（async/await）

在此示例中，我們將放棄在前兩個示例中使用的承諾鏈，而是引入一種更現代的方法來編寫異步的、基于承諾的代碼。

這種方法可以與您選擇的任何抓取機制一起使用，但對于本示例，我們將堅持使用 Axios 庫。

第三個示例與前一個示例類似的方式設置組件，方法是導入 Axios 庫，然后使用一個空的 dependencies 數組包裝用于在 useEffecta 中獲取數據的代碼。

在 useEffect 中，我們使用關鍵字 async 創建一個異步函數，然后在該函數中我們有三個獨立的部分 - try、catch 和 finally。

這種 try/catch 方法用于處理 JavaScript 中的錯誤。try塊內的代碼首先被執行，如果拋出任何錯誤，它們將被“捕獲”在塊中，catch并執行內部代碼。

最后，finallyblock 將始終在流通過 try/catch 之后執行。

useEffect(() => {// create async function b/c cannot use async in useEffect arg cbconst fetchData = async () => {//   with async/await use the try catch block syntax for handlingtry {// using await to make async code look sync and shorten const res = await axios.get(URL);setData(res.data);} catch (err) {console.error(`Error: ${err}`);// setting the error statesetError(err);} finally {setLoading ( false );}};fetchData ();}, []);

在此示例中，try 塊創建了一個名為 res（response 的縮寫）的變量，該變量使用 async 關鍵字。這允許代碼看起來同步（更短，更容易在眼睛上）。

在此示例中，axios.get(URL) 正在“等待”直到它穩定下來。如果承諾得到履行，那么我們將數據設置為狀態。如果承諾被拒絕（拋出錯誤），它會進入 catch 塊。

五、創建一個“useFetch”自定義 React Hook

第四種方法是創建我們自己的自定義 React 鉤子，調用 useFetchit 可以在我們應用程序的不同組件中重復使用，并從每個組件中刪除笨重的獲取代碼。

這個例子實際上只是采用第四個例子（使用 Axios 庫和 async/await 的相同技術）并將該代碼移動到它自己的自定義鉤子中。

為此，我們創建了一個名為 useFetch.js 的函數。然后我們使用 Effect 將前面示例中的所有代碼以及我們正在跟蹤的不同狀態添加到函數 useFetch 中。

最后，這個函數將返回一個包含每個狀態的對象，然后在調用鉤子的地方使用 useFetchaccessed。我們的 useFetchhook 還將接受一個參數，即 URL ，以允許更多的可重用性和向不同端點發出提取請求的可能性。

const useFetch = (url) => {const [data, setData] = useState(null);const [ loading , setLoading ] =  useState ( true );const [error, setError] = useState(null);useEffect(() => {// create async function b/c cannot use asyc in useEffect arg cbconst fetchData = async () => {//   with async/await use the try catch block syntax for handlingtry {// using await to make async code look sync and shortenconst res = await axios.get(url);setData(res.data);} catch (err) {console.error(`Error: ${err}`);// setting the error statesetError(err);} finally {setLoading ( false );}};fetchData ();}, []);return {data,loading,error,};
};

最后，我們將這個新的自定義鉤子導入到將使用它的組件中，并像調用任何其他 React 鉤子一樣調用它。如您所見，這極大地提高了代碼的可讀性并縮短了我們的組件。

這種方法的最后一點是您還可以安裝外部庫而不是創建您自己的自定義掛鉤。一個流行的庫 react-fetch-hook 與我們剛剛構建的鉤子具有非常相似的功能。

六、React 查詢庫

在 React 中獲取數據的最現代和最強大的方法之一是使用 React Query 庫。除了簡單的數據獲取之外，它還有許多功能，但是對于這個例子，我們將學習如何從同一個示例外部 API 中簡單地獲取數據。

安裝和導入后，React Query 提供了許多自定義掛鉤，可以以非常干凈的方式在我們的組件中重復使用。

在此示例中，我們從中導入 QueryClient，然后使用提供程序包裝我們的應用程序，并將 QueryClientProvider 實例作為屬性傳遞給包裝器。

這使我們能夠在我們的應用程序中使用該庫。

為了發出這個簡單的 GET 請求，我們導入并使用了 useQueryhooks。與前面使用自定義掛鉤的示例不同，我們傳入了兩個參數。

第一個必需參數是 queryKey ，用作此特定查詢的參考鍵。

第二個必需參數是 queryFn ，它是查詢將用于請求數據的函數。

我們將使用此查詢函數，然后使用 Fetch API 和 promise 方法語法進行初始提取，而不是像我們之前的自定義掛鉤示例中那樣只傳遞一個簡單的 URL。（這個鉤子有許多其他可選參數。）

const { isLoading, error, data } = useQuery("dogData", () => fetch(URL).then((res) => res.json()));

isLoading 從這里開始，React Query 將在幕后完成所有額外的工作，在這種情況下，我們可以從這個鉤子調用 destructure 、 error 和 use data in our application，盡管我們也可以訪問許多其他值。

在比我們當前的 Dog Image API 示例更大的示例中，使用 React Query 的力量和優勢是顯而易見的。需要提及的一些附加功能包括：緩存、在后臺更新“陳舊”數據以及其他與性能相關的優勢。

七、Redux?工具包 RTK 查詢

本文最后一種方法是使用Redux Toolkit的RTK Query進行數據采集。應用程序使用 Redux 進行狀態管理是很常見的。

如果您的公司或您當前的副項目目前正在使用 Redux，一個不錯的選擇是使用 RTK 查詢來獲取數據，因為它提供了與 React 查詢類似的簡單性和優勢。

要在存儲 Redux 代碼的任何地方開始使用 RTK 查詢，請創建一個 rtkQueryService.js 文件來設置數據獲取。

創建后，您將服務添加到您的 Redux 商店，假設您已經在使用 Redux，您將已經擁有一個包含您的應用程序的 <Provider>store 組件。

從這里開始，它與使用帶有 React Query 方法的自定義鉤子非常相似，您導入然后使用查詢鉤子并解構數據，錯誤然后是 Loading 可以在您的組件中使用。

const { data, error, isLoading } = useGetDogQuery();

如您所見，Redux 有很多設置，因此這可能不是我們用例的最佳方法，但如果您已經在 React 應用程序中使用 Redux 并且想要一種簡單而現代的獲取數據的方式，RTK 查詢 可能很棒很有價值，這也提供了緩存等好處。

最后的想法

如果你已經看到了這里，那么恭喜你！這篇文章的目的就是為那些學習 React 的人介紹一些不同的數據獲取方法。

在這篇文章中，我介紹了6種方法，希望這6種方法對你有用，也希望你能從中學習到一些新東西。

此外，還有其他當前的數據獲取方法未在此文章中提及，我相信隨著 React 生態系統的發展，其他方法將會出現。也就是說，我相信本文為理解該領域提供了堅實的基礎。