[JavaScript]axiosの使い方を学ぶ

2023年4月12日2023年11月24日

このページではJavaScriptでHTTPリクエストを行うためのライブラリの1つである、axiosについてまとめました。

axiosを使うための準備

Axiosは、JavaScriptでHTTPリクエストを行うためのライブラリです。以下は、Axiosを使用してGETリクエストを送信する方法の例です。

まずは、Axiosをインストールする必要があります。npmを使用してインストールする場合は、以下のコマンドを実行します。

npm install axios

インストールをしたバージョンは以下で確認できます。

npm view axios version

GETリクエストを使う

Axiosを使用してGETリクエストを送信するには、以下のように書きます。

const axios = require('axios');

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

この例では、Axiosを使用してhttp://example.comにGETリクエストを送信しています。レスポンスはthen関数で処理され、レスポンスオブジェクトからデータを取得してコンソールに出力されます。エラーが発生した場合は、catch関数が呼び出され、エラーメッセージがコンソールに出力されます。

POSTリクエストを使う

Axiosを使用してPOSTリクエストを送信する場合は、以下のように書きます。

const axios = require('axios');

const data = {
  name: 'John Doe',
  age: 30,
  email: 'johndoe@example.com'
};

axios.post('http://example.com', data)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

この例では、Axiosを使用してhttp://example.comにPOSTリクエストを送信しています。data変数には、送信するデータが含まれています。レスポンスはthen関数で処理され、レスポンスオブジェクトからデータを取得してコンソールに出力されます。エラーが発生した場合は、catch関数が呼び出され、エラーメッセージがコンソールに出力されます。

Axiosは、GETやPOST以外のHTTPメソッド(PUT/DELETE)も使用できます。使用方法は上記GET/PUTリクエストを送信する方法と同様です。

Axiosの設定オプション

Axiosは、上記の例で示したように、PromiseベースのAPIを提供しています。つまり、HTTPリクエストは非同期で実行され、レスポンスはthen関数やcatch関数で処理されます。

また、Axiosは、設定オプションを提供しています。以下は、Axiosを使用してリクエストを送信する際に使用できる一部の設定オプションの例です。

headers: HTTPリクエストに含めるヘッダーを指定します。
params: クエリパラメータを指定します。
timeout: リクエストのタイムアウト時間をミリ秒単位で指定します。
withCredentials: クロスドメインリクエストの場合に、クッキーや認証情報を送信するかどうかを指定します。

以下は、Axiosを使用してヘッダーを設定する例です。

const axios = require('axios');

const headers = {
  'Authorization': 'Bearer xxxxxxxx',
  'Content-Type': 'application/json'
};

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

この例では、Axiosを使用してhttp://example.comにGETリクエストを送信しています。headers変数には、リクエストに含めるヘッダーが含まれています。ヘッダーは、オプションの第2引数であるconfigオブジェクトのheadersプロパティに渡されます。レスポンスはthen関数で処理されます。

async/await構文を使う場合

Axiosは、Promise APIを提供するため、async/await構文と組み合わせることができます。以下は、Axiosを使用してasync/awaitを使用してリクエストを送信する例です。

const axios = require('axios');

async function getExample() {
  try {
    const response = await axios.get('http://example.com');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

getExample();

この例では、Axiosを使用してhttp://example.comにGETリクエストを送信しています。リクエストはasync関数内で実行され、レスポンスはawaitキーワードで処理されます。エラーが発生した場合は、try...catch構文によって処理されます。

Axiosは、HTTPリクエストをシンプルに扱える便利なライブラリです。様々なオプションが用意されているため、様々なシナリオに対応することができます。

async/await構文を使用したpostリクエストは以下のページにも記載しています。