Welche vier Methoden gibt es, um Remote-Daten in React anzufordern?

Vier Möglichkeiten, Remote-Daten anzufordern: 1. Führen Sie HTTP-Aufrufe direkt in der React-Komponente durch und verarbeiten Sie die Antwort. 2. Erstellen Sie einen Ordner, legen Sie alle Funktionen, die HTTP-Aufrufe durchführen, darin ab, zentralisieren Sie die Anforderungsdaten und verarbeiten Sie die Antwort. 3. Passen Sie den Hook an, um Daten anzufordern. 4. Verwenden Sie „react-query“ oder swr, um Daten anzufordern.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Vier Möglichkeiten, Remote-Daten in React anzufordern

React ist eine dedizierte Komponentenbibliothek. Daher gibt es nur wenige Vorschläge zum Anfordern von Remote-Daten. Wenn Sie Daten über HTTP anfordern und an die Web API senden möchten, sollten Sie die folgenden vier Methoden in Betracht ziehen.
React 是一个专注的组件库。因此，它对如何请求远程数据没有什么建议。如果要通过 HTTP 请求数据并将其发送到 Web API，可以考虑下面四种方法。

• 内联写法

• 集中管理

• 自定义 Hook

• react-query/swr

注意：在本文中，我将使用 fetch 进行 HTTP 调用，但是这些模式也适用于 Axios 之类的替代方法。另外，如果你使用的是 GraphQ L，还可以考虑使用 Apollo 之类的其他不错的选择。这篇文章假设你正在调用传统的 REST API。

方式1：内联

这是最简单，最直接的选择。在 React 组件中进行 HTTP 调用并处理响应。

fetch("/users").then(response => response.json());

看起来很简单。但是这个示例忽略了加载状态，错误处理，声明和设置相关状态等。在现实世界中， HTTP 调用看起来更像这样。

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

对于一个简单的应用程序，只要发起几个请求，就可以正常工作。但是上面的状态声明和 useEffect 都是模版。如果我要进行许多 HTTP 调用，我不想为每个调用重复和维护大约 20 行代码。内联调用让你的代码变得很丑。

看一下我们要解决的一些问题：

• 声明加载状态

• 声明错误状态

• 将错误打印到控制台

• 检查响应是否通过返回 200 response.ok

• 如果响应正常，将响应转换为 json 并返回 promise

• 如果响应不正确，抛出错误

• 在 finally 中隐藏加载状态，以确保 Loading 即使发生错误也被隐藏

• 声明一个空的依赖项数组，以便 useEffect 只运行一次

这只是一个简单的示例，它忽略了许多其他相关问题。

方式2：文件夹集中管理

如果我们在一个文件夹中处理所有 HTTP 调用会怎么样? 使用这种方法，我们创建了一个名为 services 的文件夹，并且把进行 HTTP 调用的函数都放进去。service 是最流行的术语，我在下面也讨论了很多好的替代名称，如 client 或 api。

要点是，所有的 HTTP 调用都是通过纯 JavaScript 函数处理的，存储在一个文件夹中。这是一个集中的 getUsers 函数:

export function getUsers() {
  return fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response =>
    response.json()
  );
}

下面是对 getUsers 函数的调用：

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

然而这并没有太简化请求调用。主要的好处是它可以强制一致地处理 HTTP 调用。其思想是这样的：当相关函数一起处理时，更容易一致地处理它们。如果 userService 文件夹中充满了进行 HTTP 调用的函数，那么我可以很容易地确保它们始终如一地这样做。此外，如果调用被复用，则很容易从这个集中位置调用它们。

然而，我们还可以做得更好。

方式3：自定义Hook

借助 React Hooks 的魔力，我们终于可以集中处理重复的逻辑。那么如何创建一个自定义 useFetch 钩子来简化我们的 HTTP 调用呢？

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

你的可能看起来不一样，但我发现这个基本的使用方法很有用。这个 Hook 极大地简化了所有调用。看看使用这个 Hook

• Inline-Schreiben

• Zentralisierte Verwaltung

• Kundenspezifischer Hook

• react-query/swr🎜

🎜🎜Hinweis: In diesem Artikel werde ich fetch für HTTP-Aufrufe verwenden, aber diese Muster gelten auch für die Axios-Alternative Verfahren. Wenn Sie GraphQ L verwenden, gibt es alternativ auch andere gute Optionen, die Sie in Betracht ziehen sollten, z. B. Apollo. In diesem Artikel wird davon ausgegangen, dass Sie eine herkömmliche REST-API aufrufen. 🎜🎜🎜Methode 1: Inline🎜🎜Dies ist die einfachste und unkomplizierteste Option. Führen Sie den HTTP-Aufruf durch und verarbeiten Sie die Antwort in der React-Komponente. 🎜

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

🎜Sieht einfach aus. In diesem Beispiel werden jedoch der Ladestatus, die Fehlerbehandlung, das Deklarieren und Festlegen des zugehörigen Status usw. ignoriert. In der realen Welt würde ein HTTP-Aufruf eher so aussehen. 🎜

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

🎜Für eine einfache Anwendung einfach ein paar Anfragen stellen und es sollte gut funktionieren. Aber die obige Zustandsdeklaration und useEffect sind beides Vorlagen. Wenn ich viele HTTP-Aufrufe tätige, möchte ich nicht für jeden Aufruf etwa 20 Codezeilen wiederholen und verwalten. Inline-Aufrufe lassen Ihren Code hässlich aussehen. 🎜🎜Sehen Sie sich einige der Probleme an, die wir lösen möchten: 🎜

• 🎜Ladestatus deklarieren🎜
• 🎜Fehlerstatus deklarieren🎜
• 🎜Fehler auf Konsole drucken🎜
• 🎜Überprüfen Sie, ob die Antwort erfolgreich ist, und geben Sie 200 response.ok zurück. 🎜
• 🎜Wenn die Antwort in Ordnung ist, konvertieren Sie die Antwort in json und Return <code>promise🎜
• 🎜Wenn die Antwort falsch ist, werfen Sie einen Fehler aus🎜
• 🎜Verstecken Sie den Ladestatus in finally um sicherzustellen, dass <code>Loading ausgeblendet ist, auch wenn Fehler auftreten🎜
• 🎜Deklarieren Sie ein leeres Abhängigkeitsarray, damit useEffect nur einmal ausgeführt wird🎜 li>🎜🎜Dies ist nur ein einfaches Beispiel, es ignoriert viele andere damit zusammenhängende Probleme. 🎜🎜🎜Methode 2: Zentralisierte Ordnerverwaltung🎜🎜Was passiert, wenn wir alle HTTP-Aufrufe in einem Ordner verarbeiten? Mit dieser Methode erstellen wir eine Datei namens services-Ordner und legen sie ab alle Funktionen, die darin HTTP-Aufrufe tätigen. <code>service ist der beliebteste Begriff, und ich habe unten auch viele gute alternative Namen besprochen, wie zum Beispiel client oder api. 🎜🎜🎜🎜Der Hauptpunkt ist, dass alle HTTP Aufrufe werden über reine JavaScript-Funktionen abgewickelt, die in einem Ordner gespeichert sind. Dies ist eine zentralisierte getUsers-Funktion: 🎜rrreee🎜 Hier ist der Aufruf der getUsers-Funktion: 🎜rrreee🎜 Dies vereinfacht den Anforderungsaufruf jedoch nicht allzu sehr. Der Hauptvorteil besteht darin, dass eine konsistente Verarbeitung von HTTP-Aufrufen erzwungen wird. Die Idee dahinter ist: Wenn verwandte Funktionen gemeinsam verarbeitet werden, ist es einfacher, sie konsistent zu verarbeiten. Wenn der Ordner userService mit Funktionen gefüllt ist, die HTTP-Aufrufe durchführen, kann ich leicht sicherstellen, dass sie dies konsistent tun. Wenn Anrufe außerdem wiederverwendet werden, können sie problemlos von diesem zentralen Standort aus aufgerufen werden. 🎜🎜Aber wir können es besser machen. 🎜🎜Methode 3: Benutzerdefinierter Hook🎜🎜Mit der Magie von React Hooks können wir uns endlich auf die Verarbeitung sich wiederholender Logik konzentrieren. Wie erstellen wir also einen benutzerdefinierten useFetch-Hook, um unsere HTTP-Aufrufe zu vereinfachen? 🎜rrreee🎜Ihre sieht vielleicht anders aus, aber ich finde diese grundlegende Verwendungsmethode hilfreich. Dieser Hook vereinfacht alle Anrufe erheblich. Sehen Sie, wie viel Code erforderlich ist, um diesen Hook zu verwenden:🎜rrreee🎜Für viele Anwendungen benötigen Sie nur einen benutzerdefinierten Hook wie diesen. Aber dieser Hook ist bereits komplex und beseitigt viele Probleme. 🎜🎜Aber es gibt noch viele Punkte, die wir nicht bedacht haben: Caching? . Wenn die Verbindung des Clients unzuverlässig ist, wie kann man sie wiederherstellen? Möchten Sie neue Daten erneut abrufen, wenn der Benutzer die Größe des Etiketts ändert? Wie entferne ich doppelte Abfragen? 🎜🎜Sie können diesen benutzerdefinierten Hook weiter verbessern, um alle diese Vorgänge abzuschließen. Sie sollten jedoch nur Weg 4:🎜 benötigen

  方式4：react-query/swr

  使用 react-query或swr，可以为我们处理缓存、重试、重复查询等等。我不必维护自己的自定义Hook了。而且每个 HTTP 调用都需要很少的代码：

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

  对于大多数应用程序来说，今天这是我的首选。这是完整的代码：https://codesandbox.io/s/4-ways-to-handle-restful-http-in-react-k3xug，你可以自己进行比较。

  推荐学习：《react视频教程》

Das obige ist der detaillierte Inhalt vonWelche vier Methoden gibt es, um Remote-Daten in React anzufordern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!