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.
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。
这是最简单，最直接的选择。在 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 只运行一次
这只是一个简单的示例，它忽略了许多其他相关问题。
如果我们在一个文件夹中处理所有 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 调用的函数，那么我可以很容易地确保它们始终如一地这样做。此外，如果调用被复用，则很容易从这个集中位置调用它们。
然而，我们还可以做得更好。
借助 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
Hookreact-query/swr🎜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;
}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;
}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: 🎜response.ok zurück. 🎜json< /code> und Return <code>promise🎜finally< /code> um sicherzustellen, dass <code>Loading ausgeblendet ist, auch wenn Fehler auftreten🎜useEffect nur einmal ausgeführt wird🎜< /ul>🎜🎜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< /code>-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</code > Aufrufe werden über reine <code>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使用 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!
Kompatibilitätsprüfer
Die PHPStudy-Datenbank kann die Lösung nicht starten
So verwenden Sie onclick in HTML
Was bedeutet STO in der Blockchain?
So reparieren Sie eine SQL-Datenbank
So löschen Sie meine WeChat-Adresse
So erstellen Sie Screenshots auf Huawei-Handys
Einführung in die Plug-Ins, die für die Ausführung von Java durch vscode erforderlich sind
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
