Axiosの使い方:データ通信のためのJavaScriptライブラリ

1. インストールとインポート: まず、Axiosを使用するためには、プロジェクトにAxiosをインストールする必要があります。通常、以下のコマンドでインストールできます。

npm install axios

インストールが完了したら、以下のようにAxiosをインポートします。

import axios from 'axios';

2. GETリクエストの送信: GETリクエストを送信してサーバーからデータを取得する場合は、以下のようにAxiosを使用します。

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

上記の例では、https://api.example.com/dataからデータを取得し、その結果をコンソールに表示しています。

3. POSTリクエストの送信: POSTリクエストを使用してデータをサーバーに送信する場合は、以下のようにAxiosを使用します。

axios.post('https://api.example.com/data', { name: 'John', age: 25 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

上記の例では、https://api.example.com/dataに{name: 'John', age: 25}というデータを送信しています。

4. ヘッダーの設定: Axiosを使用してリクエストを送信する際に、カスタムのヘッダーを設定することもできます。以下はヘッダーを設定する例です。

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

上記の例では、AuthorizationヘッダーとContent-Typeヘッダーを設定しています。

これらはAxiosの基本的な使用方法とコード例の一部です。Axiosは他にも様々な機能を提供しており、例えばPUTリクエストやDELETEリクエストの送信、エラーハンドリング、並行リクエストの管理などがあります。公式ドキュメントやチュートリアルを参照することで、より詳細な情報を入手することができます。