リモート データをリクエストする 4 つの方法: 1. React コンポーネントで直接 HTTP 呼び出しを実行し、応答を処理します; 2. フォルダーを作成し、HTTP 呼び出しを行うすべての関数をそのフォルダーに配置し、データとデータを一元的にリクエストします。応答; 3. データをリクエストするために Hook をカスタマイズする; 4. データをリクエストするには、「react-query」または swr を使用します。
このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。
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 行のコードを繰り返して維持したくありません。インライン呼び出しはコードの見栄えを悪くします。
response.ok
json に変換し、
promise
Loading が確実に非表示になるように、
finally で読み込み状態を非表示にします
が 1 回だけ実行されるように、空の依存関係配列をステートします。
すべての方法 2: フォルダーの一元管理
に、HTTP 呼び出しを行うすべての関数を入れます。 service
は最も一般的な用語ですが、client
や api
など、以下で多くの優れた代替名についても説明しました。
HTTP 呼び出しが、フォルダーに保存された純粋な
JavaScript 関数を通じて処理されるということです。これは集中管理された getUsers
関数です: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">export function getUsers() {
return fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response =>
response.json()
);
}</pre><div class="contentsignin">ログイン後にコピー</div></div>
これは 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
呼び出しの一貫した処理が強制されることです。考え方は次のとおりです。関連する関数を一緒に処理すると、一貫して処理することが容易になります。
フォルダーに HTTP
呼び出しを行う関数がたくさんある場合、それらの呼び出しが一貫して行われていることを簡単に確認できます。さらに、呼び出しが再利用される場合、この集中的な場所から簡単に呼び出すことができます。 しかし、もっと改善できるはずです。
方法 3: カスタム フック
呼び出しを簡素化するカスタム useFetch
フックを作成するにはどうすればよいでしょうか? <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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 };
}</pre><div class="contentsignin">ログイン後にコピー</div></div>
実際のものは違うように見えるかもしれませんが、この基本的な使い方は役に立つと思います。このフックにより、すべての呼び出しが大幅に簡素化されます。この 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:
のみです。使用 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 サイトの他の関連記事を参照してください。