React中怎么請(qǐng)求遠(yuǎn)程數(shù)據(jù)

本篇文章給大家分享的是有關(guān)React 中怎么請(qǐng)求遠(yuǎn)程數(shù)據(jù)，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

我們提供的服務(wù)有：成都做網(wǎng)站、成都網(wǎng)站制作、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、景泰ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的景泰網(wǎng)站制作公司

方式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; }

然而這并沒有太簡(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)題。

但是還有很多我們沒有考慮到的點(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; }

以上就是React 中怎么請(qǐng)求遠(yuǎn)程數(shù)據(jù)，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：React中怎么請(qǐng)求遠(yuǎn)程數(shù)據(jù)
鏈接地址：http://muchs.cn/article10/jehcgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、外貿(mào)建站、網(wǎng)站建設(shè)、企業(yè)建站、App設(shè)計(jì)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)