반응으로 원격 데이터를 요청하는 네 가지 방법은 무엇입니까

원격 데이터를 요청하는 네 가지 방법: 1. React 구성 요소에서 직접 HTTP 호출을 수행하고 응답을 처리합니다. 2. 폴더를 만들고 HTTP 호출을 수행하는 모든 기능을 폴더에 넣고 요청 데이터를 중앙 집중화하고 응답을 처리합니다. 3. Hook를 사용자 정의하여 데이터를 요청합니다. 4. "react-query" 또는 swr을 사용하여 데이터를 요청합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React에서 원격 데이터를 요청하는 네 가지 방법

React은 전용 구성 요소 라이브러리입니다. 따라서 원격 데이터를 요청하는 방법에 대한 제안이 거의 없습니다. HTTP를 통해 데이터를 요청하고 이를 Web API로 보내려면 다음 네 가지 방법을 고려해야 합니다.
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

• 인라인 쓰기

• 중앙 집중식 관리

• 맞춤형 훅

• react-query/swr🎜

🎜🎜참고: 이 기사에서는 HTTP 호출에 대해 가져오기를 사용하지만 이러한 패턴은 Axios 대체 방법에도 적용됩니다. . 또는 GraphQ L을 사용하는 경우 Apollo와 같이 고려해야 할 다른 좋은 옵션이 있습니다. 이 문서에서는 기존 REST API를 호출한다고 가정합니다. 🎜🎜🎜방법 1: 인라인🎜🎜가장 간단하고 간단한 옵션입니다. HTTP 호출을 수행하고 React 구성 요소에서 응답을 처리합니다. 🎜

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 호출은 다음과 비슷합니다. 🎜

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는 모두 템플릿입니다. HTTP 호출을 많이 할 경우 각 호출마다 약 20줄의 코드를 반복하고 유지하고 싶지 않습니다. 인라인 호출은 코드를 보기 흉하게 만듭니다. 🎜🎜우리가 해결하고 싶은 몇 가지 문제를 살펴보세요: 🎜

• 🎜로드 상태 선언🎜
• 🎜오류 상태 선언🎜
• 🎜콘솔에 오류 인쇄🎜
• 🎜응답이 통과되었는지 확인하고 200 response.ok를 반환합니다.🎜
• 🎜응답이 정상이면 응답을 json 및 Return <code>promise🎜
• 🎜응답이 올바르지 않으면 오류가 발생합니다🎜
• 🎜finally를 사용하여 오류가 발생하더라도 <code>로드가 숨겨지도록 하세요🎜
• 🎜useEffect가 한 번만 실행되도록 빈 종속성 배열을 선언하세요🎜 li>🎜🎜이것은 단순한 예일 뿐이며 다른 많은 관련 문제를 무시합니다. 🎜🎜🎜방법 2: 폴더 중앙 관리🎜🎜모든 HTTP 호출을 하나의 폴더에서 처리한다면 어떨까요? 이 방법을 사용하면 services 폴더라는 파일을 만들고, HTTP 호출을 수행하는 모든 기능. <code>service는 가장 인기 있는 용어이며 아래에서는 client 또는 api와 같은 좋은 대체 이름에 대해서도 많이 논의했습니다. 🎜🎜🎜🎜핵심은 모든 HTTP 호출은 폴더에 저장된 순수 JavaScript 함수를 통해 처리됩니다. 이것은 중앙집중화된 getUsers 함수입니다: 🎜rrreee🎜 다음은 getUsers 함수에 대한 호출입니다: 🎜rrreee🎜 그러나 이것이 요청 호출을 너무 단순화하지는 않습니다. 주요 이점은 HTTP 호출을 일관되게 처리한다는 것입니다. 아이디어는 다음과 같습니다. 관련 기능을 함께 처리하면 일관되게 처리하기가 더 쉽습니다. userService 폴더가 HTTP 호출을 수행하는 함수로 채워져 있으면 해당 함수가 일관되게 호출되는지 쉽게 확인할 수 있습니다. 또한 통화를 재사용하는 경우 중앙 위치에서 쉽게 호출할 수 있습니다. 🎜🎜하지만 우리는 더 잘할 수 있습니다. 🎜🎜방법 3: 맞춤 후크🎜🎜React Hooks의 마법을 사용하면 마침내 반복 논리 처리에 집중할 수 있습니다. 그렇다면 HTTP 호출을 단순화하기 위해 사용자 정의 useFetch 후크를 어떻게 생성합니까? 🎜rrreee🎜귀하의 모습은 다를 수 있지만 이 기본 사용법이 도움이 된다고 생각합니다. 이 후크는 모든 호출을 크게 단순화합니다. 이 Hook를 사용하는 데 얼마나 많은 코드가 필요한지 보세요.🎜rrreee🎜많은 애플리케이션의 경우 이와 같은 사용자 정의 Hook이 하나만 필요합니다. 그러나 이 Hook은 이미 복잡하며 많은 문제를 제거합니다. 🎜🎜하지만 아직 고려하지 않은 점이 많습니다: 캐싱? . 클라이언트 연결이 불안정한 경우 어떻게 다시 연결을 얻을 수 있나요? 사용자가 레이블 크기를 조정할 때 새 데이터를 다시 가져오시겠습니까? 중복 쿼리를 제거하는 방법은 무엇입니까? 🎜🎜이 사용자 정의 후크를 계속 개선하여 이러한 모든 작업을 완료할 수 있습니다. 그러나 방법 4만 필요합니다:🎜

  方式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视频教程》

위 내용은 반응으로 원격 데이터를 요청하는 네 가지 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!