Axiosを使用したReactでのデータ通信の方法

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

npm install axios

Axiosを使用するために、必要なモジュールをインポートします。

import axios from 'axios';

GETリクエストの送信: GETリクエストを使用してサーバーからデータを取得する方法を見てみましょう。

axios.get('https://api.example.com/data')
  .then(response => {
    // データの取得に成功した場合の処理
    console.log(response.data);
  })
  .catch(error => {
    // エラーが発生した場合の処理
    console.error(error);
  });

POSTリクエストの送信: POSTリクエストを使用してデータをサーバーに送信する方法を見てみましょう。

const data = {
  name: 'John Doe',
  email: '[email protected]'
};
axios.post('https://api.example.com/data', data)
  .then(response => {
    // リクエストの送信に成功した場合の処理
    console.log(response.data);
  })
  .catch(error => {
    // エラーが発生した場合の処理
    console.error(error);
  });

リクエストのヘッダー設定: 必要に応じて、リクエストヘッダーを設定することもできます。

const config = {
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your_token'
  }
};
axios.get('https://api.example.com/data', config)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

これらはAxiosを使用したReactでの基本的なデータ通信の方法といくつかのコード例です。Axiosにはさまざまな機能と設定があり、さまざまなHTTPメソッドをサポートしています。公式のAxiosドキュメントを参照すると、さらに詳細な情報を入手することができます。