JavaScript　Axiosの使い方

axiosを使ったHTTPリクエストの書き方

by

axiosとは

axiosは、JavaScriptで使用されるHTTPクライアントライブラリです。主にブラウザとサーバーの間でデータを送受信するために使用されます。axiosはPromiseベースのAPIを提供し、非同期でHTTPリクエストを行うことができます。

axiosを使用すると、GET、POST、PUT、DELETEなどのさまざまなHTTPメソッドを使ってリクエストを送信し、サーバーからのレスポンスを取得することができます。また、リクエストやレスポンスのヘッダーの設定、データの送信、認証の追加など、さまざまなHTTP操作を容易に行うことができます。

axiosは、ブラウザ環境だけでなく、Node.js環境でも使用することができます。これにより、フロントエンドとバックエンドの両方で同じコードを使用してHTTP通信を行うことができます。

axiosは非常に人気のあるライブラリであり、シンプルで使いやすいインターフェースを提供しています。そのため、多くの開発者がaxiosを選択し、JavaScriptプロジェクトでHTTP通信を行うために使用しています。

axiosのインストール


axiosをインストールするには、以下の手順を実行します。

  1. Node.jsの場合：
    • コマンドライン（ターミナル）で、プロジェクトのルートディレクトリに移動します。
    • npm install axiosのコマンドを実行して、axiosをインストールします。
  2. ブラウザの場合：
    • axiosはCDN（Content Delivery Network）を通じて直接ブラウザで使用することもできます。
    • HTMLファイルの<head>セクションまたは<body>セクション内に、以下のスクリプトタグを追加します。htmlCopy code<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

これでaxiosがインストールされました。

Node.jsの場合、npm install axiosコマンドを実行すると、プロジェクトのnode_modulesディレクトリにaxiosがインストールされます。その後、requireもしくはimportステートメントを使用してaxiosを使用することができます。

ブラウザの場合、axiosのCDNを使用すると、ブラウザでaxiosを直接利用することができます。CDNを使用する場合、axiosはグローバルオブジェクトaxiosとして利用可能になります。

axiosの基本的な書き方

では、JSONPlaceholderというテスト用のフェイクAPIを使用してサンプルのコードを書いていきましょう。

  • import axios from 'axios';
    • axiosモジュールをインポートします。ViteのESモジュールの機能を使用してaxiosをインポートしています。
  • GETリクエストの例:
axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
  • axios.get()メソッドを使用して、指定したURL (https://jsonplaceholder.typicode.com/posts) にGETリクエストを送信します。
  • レスポンスが成功した場合、then()メソッドのコールバック関数が実行されます。response.dataは、サーバーから受け取ったレスポンスデータです。
  • レスポンスがエラーの場合、catch()メソッドのコールバック関数が実行され、エラーメッセージがコンソールに表示されます。

POSTリクエストの例:

const newPost = {
  title: 'Example Post',
  body: 'This is an example post.',
  userId: 1
};

axios.post('https://jsonplaceholder.typicode.com/posts', newPost)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
  • newPostオブジェクトに、新しい投稿のデータを定義します。
  • axios.post()メソッドを使用して、指定したURL (https://jsonplaceholder.typicode.com/posts) にPOSTリクエストを送信します。newPostオブジェクトがリクエストのボディとして送信されます。
  • POSTリクエストのレスポンスが成功した場合、then()メソッドのコールバック関数が実行され、response.dataにはサーバーからのレスポンスデータが含まれます。
  • レスポンスがエラーの場合、catch()メソッドのコールバック関数が実行され、エラーメッセージがコンソールに表示されます。

これらのコードは、axiosを使用して非同期のHTTP通信を行う基本的な例です。GETリクエストとPOSTリクエストのそれぞれの場合に、レスポンスデータを取得するためのコールバック関数が指定されています。

コードを綺麗に書くために

まずは、このコードを見てください。

axiosを使う際には必ずしもasyncを使用する必要はありません。axios自体はPromiseベースの非同期処理をサポートしており、.then()と.catch()メソッドを使用して非同期なレスポンスを処理することができます。

import axios from 'axios';

function fetchData() {
  axios.get('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      console.log(response.data);

      const newPost = {
        title: 'Example Post',
        body: 'This is an example post.',
        userId: 1
      };

      return axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
    })
    .then(postResponse => {
      console.log(postResponse.data);
    })
    .catch(error => {
      console.error(error);
    });
}

fetchData();

この例では、.then()メソッドと.catch()メソッドを使用して、非同期処理の結果を取得しています。コールバック関数のネストが深くなるため、コードが読みにくくなります。

しかし、下記のようにasync/awaitを使用することでコードが見やすくなることが分かります。

async/awaitを使用することで、非同期処理のフローがフラットになり、読みやすくなります。エラーハンドリングもtry...catchブロック内で一箇所にまとめることができます。

上記のコードをasync/awaitを使った例：

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);

    const newPost = {
      title: 'Example Post',
      body: 'This is an example post.',
      userId: 1
    };

    const postResponse = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
    console.log(postResponse.data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

ですので、axiosを使用する際には、asyncキーワードを必ずしも使用する必要はありません。async/awaitを使用するか、.then()メソッドを使用するかは、コードの可読性やスタイルに合わせて選択することができます。

カスタムヘッダーとは

HTTPリクエストを送る際、上記のPOSTでサーバーに送るデータはHTTPリクエストのボディに追加しています。また、HTTPリクエストにはヘッダーという箇所があり、承認の際に使用するトークンなどを付属させることができます。

以下は、axiosを使用してHTTPリクエストのヘッダー処理をするためのサンプルコードです。

import axios from 'axios';

// カスタムヘッダーを設定したGETリクエストの例
axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YourAuthToken',
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// カスタムヘッダーを設定したPOSTリクエストの例
const data = {
  name: 'John Doe',
  email: 'johndoe@example.com'
};

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

上記のコードでは、axios.get()およびaxios.post()メソッドの第二引数として、オプションのオブジェクトを渡しています。このオブジェクト内のheadersプロパティを使用して、カスタムヘッダーを設定します。

例えば、Authorizationヘッダーにはトークンを指定し、Content-Typeヘッダーにはリクエストのコンテンツタイプを指定しています。これらのヘッダーはAPIの要件に合わせてカスタマイズすることができます。

このように、headersプロパティを使用してヘッダーを設定することで、axiosを使ってHTTPリクエストのヘッダー処理を簡単に行うことができます。

Bearerとは

実際に認証トークンを使い始めるとHTTPヘッダーのAuthorizationの部分にBearerのトークンを付ける機会があると思います。

Bearerは、認証スキーム（Authentication Scheme）の一種です。Bearerスキームは、トークンベースの認証方式の一部として使用されます。

Bearer認証では、APIエンドポイントへのアクセス時にクライアントが認証トークンを提供します。このトークンは、クライアントが認証されたユーザーであることをサーバーに示すために使用されます。

Bearerトークンは、一般的にはOAuthやJSON Web Token（JWT）などのプロトコルや仕様に基づいて生成されます。トークンはクライアントによって保持され、リクエストヘッダーのAuthorizationフィールドにBearerと共にトークンが含まれて送信されます。

例えば、以下はAuthorizationヘッダーのBearerトークンを使ったHTTPリクエストの例です：

GET /api/data HTTP/1.1
Host: example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

上記の例では、Bearerスキームに続いて実際のトークンが含まれています。サーバーはこのトークンを検証し、リクエストを認証して適切な応答を返します。

Bearerトークンを使用することで、APIへのアクセスを制御し、認証されたユーザーのみがリソースにアクセスできるようにすることができます。トークンは一定の期間で有効期限が切れる場合があり、トークンの取得やリフレッシュには対応する認証プロトコルや仕様に基づいた手続きが必要です。

注意点として、Bearerトークンはセキュリティ上の重要な情報であるため、他人に漏らさないように注意する必要があります。また、HTTPSなどのセキュアな通信プロトコルを使用してトークンを送信することが推奨されます。

axiosを使うべきではない場面はあるか


axiosは非常に人気のあるHTTPクライアントライブラリですが、特定の場面では使用を控えるべきです。

  1. ブラウザの最新機能を利用したい場合: axiosはXHR（XMLHttpRequest）を使用してHTTPリクエストを処理しますが、最新のブラウザ機能であるFetch APIやAsync/Awaitなどの機能を利用したい場合は、axiosよりもfetch()やブラウザのネイティブなAPIを検討する方が良いでしょう。
  2. バンドルサイズの削減が重要な場合: axiosは比較的小さなサイズですが、一部のプロジェクトではバンドルサイズの最適化が重要な要件です。この場合は、axiosの代わりにより軽量なHTTPクライアントライブラリや、必要な機能のみをカスタマイズできる自前の解決策を検討することがあります。
  3. REST API以外のプロトコルを使用する場合: axiosは主にRESTfulなAPIに対して使用されることを想定していますが、REST以外のプロトコル（WebSocketなど）を使用する場合は、専用のクライアントやプロトコル固有のライブラリを検討する方が適しています。
  4. カスタムなエラーハンドリングが必要な場合: axiosはPromiseを使用して非同期処理を扱いますが、エラーハンドリングに関しては一部の制約があります。プロジェクトに特定のエラーハンドリングの要件がある場合は、自前の処理や他のライブラリを組み合わせて対応することが必要になるかもしれません。

以上のような場面では、axiosの代わりに他の適切なライブラリや手段を検討することが重要です。選択肢を比較し、プロジェクトのニーズや制約に応じて最適なツールを選ぶことが良い結果を生みます。