AJAX リクエストを使用したデータのフェッチ

React ではデータフェッチに対する具体的なアプローチが決まっていないため、一般的には axios などのライブラリや、ブラウザが提供する fetch() API のどちらかをよく使用します。

グローバルの fetch 関数を使用すると AJAX リクエストを実行できます。入力として URL を取り込み、 Promise を返します。この結果は Response オブジェクトに解決されます。fetch の詳細については こちら でご覧いただけます。

Promise は非同期処理の最終的な結果を表します。Promise の詳細については こちら と こちら でご覧いただけます。axios と fetch() のどちらにも Promise が基盤として使用されています。また、 async / await 構文を使用して、コールバックのネストを減らすこともできます。

fetch() API と Promise が対象のブラウザで使用可能であることを確認してください。たとえば、Internet Explorer では ポリフィル が必要です。

React コンポーネントから AJAX リクエストを行う詳細については、React Web サイトの FAQ をご覧ください。