React でリモート データをリクエストする 4 つの方法とは何ですか

リモート データをリクエストする 4 つの方法: 1. React コンポーネントで直接 HTTP 呼び出しを実行し、応答を処理します; 2. フォルダーを作成し、HTTP 呼び出しを行うすべての関数をそのフォルダーに配置し、データとデータを一元的にリクエストします。応答; 3. データをリクエストするために Hook をカスタマイズする; 4. データをリクエストするには、「react-query」または swr を使用します。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

React でリモート データをリクエストする 4 つの方法

React は専用のコンポーネント ライブラリです。したがって、リモート データをリクエストする方法についてはほとんど提案がありません。 HTTP 経由でデータをリクエストし、Web API に送信する場合は、考慮すべき 4 つの方法があります。

• #インライン書き込み

• 集中管理

• カスタマイズ

  フック

• react-query/swr

注: この記事では、fetch make を使用します。 HTTP 呼び出しですが、これらのパターンは Axios などの代替手段にも当てはまります。あるいは、GraphQ L を使用している場合は、Apollo などの他の優れたオプションを検討することもできます。この記事では、従来の REST API を呼び出していることを前提としています。

方法 1: インライン

これは、最も単純かつ直接的なオプションです。

HTTP 呼び出しを実行し、React コンポーネントで応答を処理します。

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

• 応答が OK の場合、応答を

  json に変換し、promise

• 応答が正しくない場合、エラーをスローします

• エラーが発生した場合でも

  Loading が確実に非表示になるように、finally で読み込み状態を非表示にします

• ##useEffect

  が 1 回だけ実行されるように、空の依存関係配列をステートします。

## これは、他の多くの関連問題を無視した単純な例にすぎません。

方法 2: フォルダーの一元管理

すべての

HTTP

呼び出しを 1 つのフォルダーで処理するとどうなるでしょうか? この方法を使用して、## という名前のフォルダーを作成します。 #services

に、HTTP 呼び出しを行うすべての関数を入れます。 service は最も一般的な用語ですが、client や api など、以下で多くの優れた代替名についても説明しました。

重要な点は、すべての

HTTP 呼び出しが、フォルダーに保存された純粋な

JavaScript

関数を通じて処理されるということです。これは集中管理された getUsers 関数です: <pre class="brush:js;toolbar:false;">export function getUsers() { return fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response =&gt; response.json() ); }</pre> これは 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: カスタム フック

React Hooks

の魔法を使用すると、最終的に反復ロジックの処理に集中できるようになります。では、

HTTP

呼び出しを簡素化するカスタム useFetch フックを作成するにはどうすればよいでしょうか? <pre class="brush:js;toolbar:false;">import { useState, useEffect, useRef } from &quot;react&quot;; // 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(() =&gt; { // Only refetch if url or init params change. if (prevUrl.current === url &amp;&amp; prevInit.current === init) return; prevUrl.current = url; prevInit.current = init; fetch(process.env.REACT_APP_API_BASE_URL + url, init) .then(response =&gt; { if (response.ok) return response.json(); setError(response); }) .then(data =&gt; setData(data)) .catch(err =&gt; { console.error(err); setError(err); }) .finally(() =&gt; setLoading(false)); }, [init, url]); return { data, loading, error }; }</pre>実際のものは違うように見えるかもしれませんが、この基本的な使い方は役に立つと思います。このフックにより、すべての呼び出しが大幅に簡素化されます。この 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;
}

多くのアプリケーションでは、このようなカスタム フックが 1 つだけ必要です。しかし、このフックはすでに複雑であり、多くの問題を解決します。 しかし、まだ考慮していない点がたくさんあります。キャッシュ? . クライアントの接続が信頼できない場合、再度接続を取得するにはどうすればよいですか?ユーザーがラベルのサイズを変更したときに新しいデータを再取得しますか?重複したクエリを削除するにはどうすればよいですか?

このカスタム フックを引き続き改良して、これらの操作をすべて完了することができます。ただし、必要なのは方法 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视频教程》

以上がReact でリモート データをリクエストする 4 つの方法とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。