I.はじめに
データのフェッチは、React アプリケーションの中核となる側面です。React 開発者にとって、さまざまなデータ取得方法と、どのユースケースが自分たちに最適であるかを理解することが重要です。
ただし、その前に JavaScript Promise を理解しましょう。
つまり、Promise は将来値を生成する JavaScript オブジェクトです。これは通常、非同期操作 (データのフェッチなど) に適用されます。
Promise には 3 つの状態があります。
- 保留中:約束がまだ進行中である場合
- 履行: Promise が正常に解決され、値が返される場合
- 拒否されました: Promise はエラーで失敗しました
Promise が「Fulfilled」または「Rejected」の場合、その約束は解決されます。Promise には、結果に応じてさまざまな処理を実行するためのさまざまなメソッドがあります。これらの方法については、次のセクションで詳しく説明します。
2. Promise メソッドを使用して API を取得します
Fetch API は、開発者が直接的な方法でデータをフェッチできるようにするグローバル fetch() メソッドを提供します。fetch() が登場するまで、従来のアプローチは XMLHttpRequest() を使用することでした。(fetch() はより強力で柔軟な機能セットに置き換えられているため、このメソッドについてはこの記事では説明しません。)
fetch() メソッドは、リクエストする URL を 1 つのパラメータとして受け取り、Promise を返します。2 番目のオプションのパラメーター options はプロパティの配列です。fetch() の戻り値は、JSON または XML (オブジェクトの配列または単一のオブジェクト) になります。オプション引数がない場合、fetch() は常に GET リクエストを作成します。
最初のメソッドは、単純なデータ取得のユースケースでよく見られるもので、API ドキュメントを参照するときに最初に表示されることがよくあります。
前述したように、犬のランダムな画像を返す API からデータを取得し、その画像を画面上にレンダリングします。リクエストを行う前に、コンポーネントが最初にマウントされるときにのみ fetch() メソッドが実行されるように、空の依存関係配列を使用してコードを useEffecthook でラップします。
useEffect(() => {
fetch(URL)
// syntax for handling promises
.then((res) => {
// check to see if response is okay
if (res.ok) {
// if okay, take JSON and parse to JavaScript object
return res.json();
}
throw res;
})
// .json() returns a promise as well
.then((data) => {
console.log(data);
// setting response as the data state
setData(data);
})
// if res is not okay the res is thrown here for error
.catch((err) => {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
})
// regardless if promise resolves successfully or not we remove loading state
.finally(() => {
setLoading ( false );
});
}, []);上の例では、メソッドを呼び出し、API エンドポイントの URL を渡しました。このメソッドでは、Promise オブジェクトのメソッドを使用します (Promise を返すことを思い出してください)。
このメソッドを使用し、コールバック関数を渡して応答が OK かどうかを確認します。応答が OK の場合、返された JSON データを取得し、このメソッドを使用してそれを JavaScript オブジェクトに解析します。正常な応答が得られない場合はエラーとして報告させていただきます。
.json() メソッドも Promise を返すため、別の .then() を連鎖させて、データの状態を設定する関数を渡すことができます。この関数は、コンポーネント内の他の場所で使用されます。この例では、外部 API は url プロパティを持つオブジェクトを返します (これはソース画像として使用されます)。
チェーンを続けると、次の部分は .catch() で、Promise が拒否されたときに呼び出される関数を準備します。これにより、別の Promise も返され、それを連鎖させることができ、Promise が解決されたかどうか (解決されたか拒否されたか) に関係なく、final() が呼び出されます。
この .finally() メソッドを使用すると、 .then() と .catch() でのコードの重複を回避できるため、この例では読み込み状態を削除するのに適しています。
3. Promise メソッドを使用したライブラリ Axios
Axios は、効率的なデータ取得のための人気のある HTTP クライアント ライブラリです。npm またはその他のパッケージ マネージャーを介して React アプリケーションに簡単にインストールできます。Axios の使用は Fetch API の代替手段であり、外部ライブラリのインストールを気にしない場合にはいくつかの利点があります。
2 番目の例は最初の例のコードに非常に近く、同じ Promise メソッドを使用して Promise の状態と応答を処理します。
Axios ライブラリをコンポーネントに fetch() した後、URL を外部 API エンドポイントに渡す axios.get() メソッドを使用できます。
これは Promise を返すため、Promise メソッド チェーンと同じアプローチを取ることができます。
useEffect(() => {
axios.get(URL)
// syntax for handling promises
.then((res) => {
console.log(res.data);
// axios converts json to object for us (shortens our code)
setData(res.data);
})
// axios takes care of error handling for us instead of checking manually
.catch((err) => {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
})
// regardless if promise resolves successfully or not we remove loading state
.finally(() => {
setLoading ( false );
});
}, []);Fetch API のコードとこの Axios メソッドの明らかな違いは、Axios では .then() JSON を JavaScript オブジェクトに変換してくれる (コードが短縮される) ため、Axios では必要なのは 1 つだけであることです。
また、axios は 400 と 500 の範囲のエラーをスローするため、手動でエラーをスローする条件を作成することはなくなりました (これもコードを短縮します)。
4. 非同期機能（async/await）
この例では、前の 2 つの例で使用した Promise チェーンを放棄し、代わりに非同期の Promise ベースのコードを作成するためのより現代的なアプローチを導入します。
このアプローチは、任意のフェッチ メカニズムで使用できますが、この例では Axios ライブラリを使用することにします。
3 番目の例では、Axios ライブラリをインポートし、空の依存関係配列を使用して useEffecta でデータを取得するコードをラップすることにより、前の例と同様の方法でコンポーネントをセットアップします。
useEffect では、キーワード async を使用して非同期関数を作成します。その関数内には、try、catch、finally の 3 つの別々の部分があります。
この try/catch アプローチは、JavaScript でエラーを処理するために使用されます。try ブロック内のコードが最初に実行され、エラーがスローされた場合はブロック内で「キャッチ」され、内部コードをキャッチして実行します。
最後に、finally ブロックは、フローが try/catch を通過した後に常に実行されます。
useEffect(() => {
// create async function b/c cannot use async in useEffect arg cb
const fetchData = async () => {
// with async/await use the try catch block syntax for handling
try {
// using await to make async code look sync and shorten
const res = await axios.get(URL);
setData(res.data);
} catch (err) {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
} finally {
setLoading ( false );
}
};
fetchData ();
}, []);この例では、try ブロックは、async キーワードを使用する res (response の略) という名前の変数を作成します。これにより、コードが同期的に見えるようになります (短くて見やすくなります)。
この例では、axios.get(URL) は安定するまで「待機」しています。約束が果たされた場合、データを状態に設定します。Promise が拒否された場合 (エラーがスローされた場合)、catch ブロックに入ります。
5.「useFetch」カスタム React フックを作成する
4 番目のアプローチは、アプリケーションのさまざまなコンポーネント間で再利用できる useFetchit を呼び出す独自のカスタム React フックを作成し、各コンポーネントから不格好なフェッチ コードを削除することです。
この例は実際には 4 番目の例 (Axios ライブラリと async/await の同じテクニックを使用) を取り上げ、そのコードを独自のカスタム フックに移動しただけです。
これを行うには、useFetch.js という関数を作成します。次に、追跡しているさまざまな状態を持つ前の例のすべてのコードを、Effect を使用して関数 useFetch に追加します。
最後に、この関数は各状態を含むオブジェクトを返し、フックが呼び出される場所で useFetchaccessed を返します。useFetchhook は、再利用性を高め、さまざまなエンドポイントにフェッチ リクエストを行う可能性を可能にするために、1 つのパラメーターである URL も受け入れます。
const useFetch = (url) => {
const [data, setData] = useState(null);
const [ loading , setLoading ] = useState ( true );
const [error, setError] = useState(null);
useEffect(() => {
// create async function b/c cannot use asyc in useEffect arg cb
const fetchData = async () => {
// with async/await use the try catch block syntax for handling
try {
// using await to make async code look sync and shorten
const res = await axios.get(url);
setData(res.data);
} catch (err) {
console.error(`Error: ${err}`);
// setting the error state
setError(err);
} finally {
setLoading ( false );
}
};
fetchData ();
}, []);
return {
data,
loading,
error,
};
};最後に、この新しいカスタム フックを使用するコンポーネントにインポートし、他の React フックと同様に呼び出します。ご覧のとおり、これによりコードの可読性が大幅に向上し、コンポーネントが短縮されます。
このアプローチの最後のポイントは、独自のカスタム フックを作成する代わりに、外部ライブラリをインストールすることもできることです。人気のあるライブラリのreact-fetch-hookは、先ほど構築したフックと非常によく似た機能を備えています。
6. Reactクエリライブラリ
React でデータをフェッチする最も最新かつ強力な方法の 1 つは、React Query ライブラリを使用することです。単純なデータのフェッチ以外にも多くのことを行いますが、この例では、同じサンプルの外部 API から単純にデータをフェッチする方法を学びます。
React Query をインストールしてインポートすると、非常にクリーンな方法でコンポーネント間で再利用できる多数のカスタム フックが提供されます。
この例では、そこから QueryClient をインポートし、アプリケーションをプロバイダーでラップし、QueryClientProvider インスタンスをプロパティとしてラッパーに渡します。
これにより、アプリケーションでライブラリを使用できるようになります。
この単純な GET リクエストを行うには、useQueryhooks をインポートして使用します。カスタム フックを使用した前の例とは異なり、2 つのパラメーターを渡します。
最初の必須パラメータは queryKey で、この特定のクエリの参照キーとして使用されます。
2 番目の必須パラメータは queryFn で、クエリがデータを要求するために使用する関数です。
前のカスタム フックの例のように単純な URL を渡す代わりに、このクエリ関数を使用し、最初のフェッチに Fetch API と Promise メソッド構文を使用します。(このフックには他にも多くのオプションのパラメーターがあります。)
const { isLoading, error, data } = useQuery("dogData", () => fetch(URL).then((res) => res.json()));isLoading ここから、React Query はすべての追加作業を舞台裏で実行します。この場合、このフックからアプリケーションで破棄、エラーを呼び出し、データを使用できますが、他の多くの値にも同様にアクセスできます。
現在の Dog Image API の例よりも大きな例では、React Query を使用することの威力と利点が明らかです。追加機能としては、キャッシュ、バックグラウンドでの「古い」データの更新、その他のパフォーマンス関連の利点などがあります。
7. Redux ツールキット RTK クエリ
この記事の最後の方法は、Redux Toolkit の RTK Query を使用してデータを収集する方法です。アプリケーションが状態管理に Redux を使用するのは非常に一般的です。
あなたの会社または現在のサイドプロジェクトが現在 Redux を使用している場合、React クエリと同様のシンプルさと利点を提供するため、RTK クエリを使用してデータをフェッチするのが良い選択肢です。
Redux コードが保存されている場所で RTK クエリの使用を開始するには、rtkQueryService.js ファイルを作成してデータのフェッチを設定します。
作成したら、サービスを Redux ストアに追加します。すでに Redux を使用していると仮定すると、アプリケーションを含む <Provider>store コンポーネントがすでに存在します。
ここからは、React Query メソッドでカスタム フックを使用するのとよく似ています。インポートしてからクエリ フックを使用し、データ、エラーを構造解除し、コンポーネントで Loading を使用できます。
const { data, error, isLoading } = useGetDogQuery();ご覧のとおり、Redux には多くの設定があるため、これは私たちのユースケースには最適なアプローチではないかもしれませんが、React アプリですでに Redux を使用していて、データを取得するシンプルでモダンな方法が必要な場合は、RTK クエリが必要です。 Stick は非常に価値があり、キャッシュなどの利点もあります。
最終的な考え
ここまで進んだなら、おめでとうございます! この記事の目的は、React を学習している人向けに、いくつかの異なるデータ取得方法を紹介することです。
この記事では 6 つの方法を紹介しました。これらの 6 つの方法があなたのお役に立ち、そこから何か新しいことを学んでいただければ幸いです。
また、この投稿では取り上げていない現在のデータ取得方法は他にもありますが、React エコシステムが成長するにつれて他の方法も登場すると確信しています。そうは言っても、この記事はこの分野を理解するための強固な基盤を提供すると信じています。
関連コンテンツの拡充：（技術フロンティア）
伝統的な企業でも大規模なデジタル化が始まったこの10年で、社内ツールの開発過程では、大量のページ、シーン、コンポーネントなどが常に繰り返されていることが分かりました。このホイールはエンジニアにとって多くの時間を無駄にしました。
このような問題に対応して、ローコードでは、特定の繰り返し発生するシナリオとプロセスを個別のコンポーネント、API、データベース インターフェイスに視覚化し、ホイールの繰り返し作成を回避します。プログラマーの生産性が大幅に向上しました。
プログラマーが知っておくべきソフトウェア JNPF 高速開発プラットフォームを推奨します。業界をリードする SpringBoot マイクロサービス アーキテクチャを採用し、SpringCloud モードをサポートし、プラットフォーム拡張の基盤を改善し、迅速なシステム開発、柔軟な拡張、シームレスな統合、高度なニーズを満たします。パフォーマンスアプリケーションなどの包括的な機能。フロントエンドとバックエンドの分離モードを採用し、フロントエンドとバックエンドの開発者が協力して異なるセクションを担当できるため、手間が省け便利です。
無料トライアル公式サイト： https: //www.jnpfsoft.com/?csdn
ローコード技術を理解していなくても、すぐに体験して習得できます。