日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

React 是一個(gè)專注的組件庫(kù)。因此，它對(duì)如何請(qǐng)求遠(yuǎn)程數(shù)據(jù)沒有什么建議。如果要通過 HTTP 請(qǐng)求數(shù)據(jù)并將其發(fā)送到 Web API，可以考慮下面四種方法。

為德州等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及德州網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、德州網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

• 內(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());
 
 
 
 

看起來很簡(jiǎn)單。但是這個(gè)示例忽略了加載狀態(tài)，錯(cuò)誤處理，聲明和設(shè)置相關(guān)狀態(tài)等。在現(xiàn)實(shí)世界中， HTTP 調(diào)用看起來更像這樣。

 
 
 
 

  
  
  
  
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)用讓你的代碼變得很丑。

看一下我們要解決的一些問題：

• 聲明加載狀態(tài)
• 聲明錯(cuò)誤狀態(tài)
• 將錯(cuò)誤打印到控制臺(tái)
• 檢查響應(yīng)是否通過返回 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)問題。

方式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)用都是通過純 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 鉤子來簡(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 };
  
  
  
  
}
 
 
 
 

你的可能看起來不一樣，但我發(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ù)雜了，并且它消除了許多問題。

但是還有很多我們沒有考慮到的點(diǎn)：緩存?、如果客戶端的連接不可靠，如何重新獲取?你想在用戶重新調(diào)整標(biāo)簽時(shí)重新獲取新數(shù)據(jù)嗎?如何消除重復(fù)查詢?

你可以不斷完善這個(gè)自定義Hook來完成所有這些操作。但是，您應(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)用程序來說，今天這是我的選擇。這是完整的代碼：https://codesandbox.io/s/4-ways-to-handle-restful-http-in-react-k3xug，你可以自己進(jìn)行比較。

文章標(biāo)題：React中請(qǐng)求遠(yuǎn)程數(shù)據(jù)的四種方法
網(wǎng)站地址：http://www.5511xx.com/article/dpooohg.html