Reactでのawaitとaxiosの使用方法

まず、プロジェクトでaxiosをインストールします。以下のコマンドを使用して、プロジェクトのディレクトリでaxiosをインストールします。

npm install axios

axiosがインストールされたら、Reactコンポーネント内で使用するために、import文を追加します。

import axios from 'axios';

次に、非同期処理を行いたい関数内で、awaitとaxiosを使用します。例えば、APIからデータを取得して表示する場合を考えましょう。

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
    // データの表示や他の処理を行う
  } catch (error) {
    console.error(error);
    // エラーハンドリングを行う
  }
}

上記の例では、axios.getメソッドを使用してAPIリクエストを行っています。awaitキーワードは、非同期処理が完了するまで待機し、レスポンスが返ってくるとその結果を取得します。エラーが発生した場合は、catchブロックでエラーハンドリングを行うことができます。

このように、awaitとaxiosを組み合わせることで、非同期処理をより直感的に記述することができます。