React 中請(qǐng)求遠(yuǎn)程數(shù)據(jù)的四種方法
React 是一個(gè)專注的組件庫(kù)。因此，它對(duì)如何請(qǐng)求遠(yuǎn)程數(shù)據(jù)沒(méi)有什么建議。如果要通過(guò) HTTP 請(qǐng)求數(shù)據(jù)并將其發(fā)送到 Web API，可以考慮下面四種方法。
- 內(nèi)聯(lián)寫法
- 集中管理
- 自定義
Hook react-query/swr
注意：在本文中，我將使用 fetch 進(jìn)行 HTTP 調(diào)用，但是這些模式也適用于 Axios 之類的替代方法。另外，如果你使用的是 GraphQ L，還可以考慮使用 Apollo 之類的其他不錯(cuò)的選擇。這篇文章假設(shè)你正在調(diào)用傳統(tǒng)的 REST API。
方式1：內(nèi)聯(lián)
這是最簡(jiǎn)單，最直接的選擇。在 React 組件中進(jìn)行 HTTP 調(diào)用并處理響應(yīng)。
fetch("/users").then(response?=>?response.json());
看起來(lái)很簡(jiǎn)單。但是這個(gè)示例忽略了加載狀態(tài)，錯(cuò)誤處理，聲明和設(shè)置相關(guān)狀態(tài)等。在現(xiàn)實(shí)世界中， HTTP 調(diào)用看起來(lái)更像這樣。
import?React,?{?useState,?useEffect?}?from?"react";
export?default?function?InlineDemo()?{
??const?[users,?setUsers]?=?useState([]);
??const?[loading,?setLoading]?=?useState(true);
??const?[error,?setError]?=?useState(null);
??useEffect(()?=>?{
????fetch(`${process.env.REACT_APP_API_BASE_URL}users`)
??????.then(response?=>?{
????????if?(response.ok)?return?response.json();
????????throw?response;
??????})
??????.then(json?=>?{
????????setUsers(json);
??????})
??????.catch(err?=>?{
????????console.error(err);
????????setError(err);
??????})
??????.finally(()?=>?{
????????setLoading(false);
??????});
??},?[]);
??if?(loading)?return?"Loading...";
??if?(error)?return?"Oops!";
??return?users[0].username;
}
對(duì)于一個(gè)簡(jiǎn)單的應(yīng)用程序，只要發(fā)起幾個(gè)請(qǐng)求，就可以正常工作。但是上面的狀態(tài)聲明和 useEffect 都是模版。如果我要進(jìn)行許多 HTTP 調(diào)用，我不想為每個(gè)調(diào)用重復(fù)和維護(hù)大約 20 行代碼。內(nèi)聯(lián)調(diào)用讓你的代碼變得很丑。
看一下我們要解決的一些問(wèn)題：
- 聲明加載狀態(tài)
- 聲明錯(cuò)誤狀態(tài)
- 將錯(cuò)誤打印到控制臺(tái)
- 檢查響應(yīng)是否通過(guò)返回 200
response.ok - 如果響應(yīng)正常，將響應(yīng)轉(zhuǎn)換為
json并返回promise - 如果響應(yīng)不正確，拋出錯(cuò)誤
- 在
finally中隱藏加載狀態(tài)，以確保Loading即使發(fā)生錯(cuò)誤也被隱藏 - 聲明一個(gè)空的依賴項(xiàng)數(shù)組，以便
useEffect只運(yùn)行一次
這只是一個(gè)簡(jiǎn)單的示例，它忽略了許多其他相關(guān)問(wèn)題。
方式2：文件夾集中管理
如果我們?cè)谝粋€(gè)文件夾中處理所有 HTTP 調(diào)用會(huì)怎么樣? 使用這種方法，我們創(chuàng)建了一個(gè)名為 services 的文件夾，并且把進(jìn)行 HTTP 調(diào)用的函數(shù)都放進(jìn)去。service 是最流行的術(shù)語(yǔ)，我在下面也討論了很多好的替代名稱，如 client 或 api。
要點(diǎn)是，所有的 HTTP 調(diào)用都是通過(guò)純 JavaScript 函數(shù)處理的，存儲(chǔ)在一個(gè)文件夾中。這是一個(gè)集中的 getUsers 函數(shù):
export?function?getUsers()?{
??return?fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response?=>
????response.json()
??);
}
下面是對(duì) getUsers 函數(shù)的調(diào)用：
import?React,?{?useState,?useEffect?}?from?"react";
import?{?getUsers?}?from?"./services/userService";
export?default?function?CentralDemo()?{
??const?[users,?setUsers]?=?useState([]);
??const?[loading,?setLoading]?=?useState(true);
??const?[error,?setError]?=?useState(null);
??useEffect(()?=>?{
????getUsers()
??????.then(json?=>?{
????????setUsers(json);
????????setLoading(false);
??????})
??????.catch(err?=>?{
????????console.error(err);
????????setError(err);
??????});
??},?[]);
??if?(loading)?return?"Loading...";
??if?(error)?return?"Oops!";
??return?users[0].username;
}
然而這并沒(méi)有太簡(jiǎn)化請(qǐng)求調(diào)用。主要的好處是它可以強(qiáng)制一致地處理 HTTP 調(diào)用。其思想是這樣的：當(dāng)相關(guān)函數(shù)一起處理時(shí)，更容易一致地處理它們。如果 userService 文件夾中充滿了進(jìn)行 HTTP 調(diào)用的函數(shù)，那么我可以很容易地確保它們始終如一地這樣做。此外，如果調(diào)用被復(fù)用，則很容易從這個(gè)集中位置調(diào)用它們。
然而，我們還可以做得更好。
方式3：自定義Hook
借助 React Hooks 的魔力，我們終于可以集中處理重復(fù)的邏輯。那么如何創(chuàng)建一個(gè)自定義 useFetch 鉤子來(lái)簡(jiǎn)化我們的 HTTP 調(diào)用呢？
import?{?useState,?useEffect,?useRef?}?from?"react";
//?This?custom?hook?centralizes?and?streamlines?handling?of?HTTP?calls
export?default?function?useFetch(url,?init)?{
??const?[data,?setData]?=?useState(null);
??const?[loading,?setLoading]?=?useState(true);
??const?[error,?setError]?=?useState(null);
??const?prevInit?=?useRef();
??const?prevUrl?=?useRef();
??useEffect(()?=>?{
??//?Only?refetch?if?url?or?init?params?change.
????if?(prevUrl.current?===?url?&&?prevInit.current?===?init)?return;
????prevUrl.current?=?url;
????prevInit.current?=?init;
????fetch(process.env.REACT_APP_API_BASE_URL?+?url,?init)
??????.then(response?=>?{
????????if?(response.ok)?return?response.json();
????????setError(response);
??????})
??????.then(data?=>?setData(data))
??????.catch(err?=>?{
????????console.error(err);
????????setError(err);
??????})
??????.finally(()?=>?setLoading(false));
??},?[init,?url]);
??return?{?data,?loading,?error?};
}
你的可能看起來(lái)不一樣，但我發(fā)現(xiàn)這個(gè)基本的使用方法很有用。這個(gè) Hook 極大地簡(jiǎn)化了所有調(diào)用。看看使用這個(gè) Hook 需要多少代碼 :
import?React?from?"react";
import?useFetch?from?"./useFetch";
export?default?function?HookDemo()?{
??const?{?data,?loading,?error?}?=?useFetch("users");
??if?(loading)?return?"Loading...";
??if?(error)?return?"Oops!";
??return?data[0].username;
}
對(duì)于許多應(yīng)用程序，你只需要一個(gè)這樣的自定義Hook。但是這個(gè)Hook已經(jīng)很復(fù)雜了，并且它消除了許多問(wèn)題。
但是還有很多我們沒(méi)有考慮到的點(diǎn)：緩存？、如果客戶端的連接不可靠，如何重新獲取？你想在用戶重新調(diào)整標(biāo)簽時(shí)重新獲取新數(shù)據(jù)嗎？如何消除重復(fù)查詢？
你可以不斷完善這個(gè)自定義Hook來(lái)完成所有這些操作。但是，您應(yīng)該只需要方式4:
方式4：react-query/swr
使用 react-query或swr，可以為我們處理緩存、重試、重復(fù)查詢等等。我不必維護(hù)自己的自定義Hook了。而且每個(gè) HTTP 調(diào)用都需要很少的代碼：
import?React?from?"react";
import?{?getUsers?}?from?"./services/userService";
import?{?useQuery?}?from?"react-query";
export?default?function?ReactQueryDemo()?{
??const?{?data,?isLoading,?error?}?=?useQuery("users",?getUsers);
??if?(isLoading)?return?"Loading...";
??if?(error)?return?"Oops!";
??return?data[0].username;
}
對(duì)于大多數(shù)應(yīng)用程序來(lái)說(shuō)，今天這是我的首選。這是完整的代碼：https://codesandbox.io/s/4-ways-to-handle-restful-http-in-react-k3xug，你可以自己進(jìn)行比較。
你是怎么處理 HTTP 調(diào)用的呢？歡迎和我討論～
了解更多信息請(qǐng)戳：https://www.bitnative.com/2020/07/06/four-ways-to-fetch-data-in-react/
?? 看完三件事
如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我三個(gè)小忙：
- 點(diǎn)贊，讓更多的人也能看到這篇內(nèi)容（收藏不點(diǎn)贊，都是耍流氓 -_-）
- 關(guān)注公眾號(hào)「前端勸退師」，不定期分享原創(chuàng)知識(shí)。
- 也看看其它文章
勸退師個(gè)人微信：huab119，或公眾號(hào)留言，我加你們
也可以來(lái)我的GitHub博客里拿所有文章的源文件：
前端勸退指南：https://github.com/roger-hiro/BlogFN 一起玩耍呀。~
你的「點(diǎn)贊在看分享」是對(duì)作者最大的支持??