Axios：その概要、HTTPリクエスト、API操作の基本

Axiosとは？

Axiosは、ブラウザとNode.js環境からHTTPリクエストを行うために設計されたJavaScriptライブラリです。ブラウザではXMLHttpRequest、Node.jsではhttpモジュールの上に構築されており、両方のプラットフォームに統一されたAPIを提供します。

ネイティブfetchに対するAxiosの主な利点は、自動JSON処理、インターセプターサポート、より便利なエラーハンドリングです。fetchとは異なり、AxiosはJSONレスポンスボディを取得するために2回の.then呼び出しを必要とせず、HTTPエラー（4xx、5xx）で自動的に例外をスローします。

このライブラリは、GET、POST、PUT、DELETE、PATCH、HEADのすべての主要なHTTPメソッドをサポートしています。シンプルなプロジェクトから、毎日数十万のリクエストを処理する大規模なエンタープライズアプリケーションまで使用できます。

Axiosの主な特性

• Promise API — すべての操作がPromiseを返し、非同期コードを簡素化
• TypeScriptサポート — すべてのメソッドと設定の完全な型付け
• インターセプター — リクエストとレスポンスを処理するミドルウェア
• 変換 — 入力と出力での自動データ変換

Axiosのアーキテクチャと動作原理

Axiosのアーキテクチャはアダプターの概念に基づいています。ライブラリはトランスポート層を抽象化します。ブラウザではXMLHttpRequest、Node.jsではhttpまたはhttpsモジュールを使用します。これにより、実行環境に関係なく単一のインターフェースを提供します。

各リクエストは、リクエスト設定またはレスポンスを変更できるインターセプターのチェーンを通過します。インターセプターの後、リクエストはアダプターに渡され、実際のHTTP呼び出しを実行します。レスポンスは、アプリケーションコードに到達する前にレスポンスインターセプターを通過します。

Axiosリクエストのライフサイクル

1. 設定の作成 — メソッド、URL、ヘッダー、リクエストボディ
2. リクエストインターセプター — 設定の変更、トークンの追加
3. HTTP呼び出し — ブラウザまたはNode.jsアダプターを介した実行
4. レスポンスインターセプター — レスポンス変換、エラーハンドリング
5. 結果の返却 — Promiseがデータで解決されるか拒否される

Axiosの主な機能

Axiosには、モバイルおよびWebアプリケーションでHTTPを扱うための便利な組み込み機能が多数含まれています。主な機能を見てみましょう。

自動データ変換

リクエスト送信時に、AxiosはJSON.stringifyを使用してJavaScriptオブジェクトをJSON文字列に自動変換します。レスポンス受信時には、ライブラリがJSONをオブジェクトに戻します。これにより、開発者は手動でのシリアライズとデシリアライズから解放されます。

CSRF保護

ブラウザ環境では、Axiosが自動的にCookieからXSRF-TOKENヘッダーを追加し、アプリケーションをクロスサイトリクエストフォージェリから保護します。これを行うには、サーバーがXSRF-TOKENという名前のCookieでトークンを送信するように設定するだけで十分です。

タイムアウトとリクエストキャンセル

ライブラリはtimeoutパラメータによるタイムアウト設定と、AbortControllerによるリクエストキャンセルをサポートしています。これは、スタックしたリクエストがバッテリーとデータを消費する、接続が不安定なモバイルアプリケーションで特に重要です。

Axiosのインストールと設定

Axiosのインストールは任意のパッケージマネージャーを介して行います。ライブラリはnpmレジストリで利用可能で、Node.jsとブラウザプロジェクトの両方で使用できます。TypeScriptの場合、型はメインパッケージに含まれています — 追加の依存関係は必要ありません。

インストール後、ベースURL、デフォルトタイムアウト、共通ヘッダーなどの基本設定でインスタンスを作成できます。これにより、毎回同じパラメータを繰り返すことなく、HTTPクライアント設定を一元管理できます。

# npmでインストール
npm install axios

# yarnでインストール
yarn add axios

# pnpmでインストール
pnpm add axios

設定付きインスタンスの作成

各APIサービスに対して個別のAxiosインスタンスを作成することをお勧めします。これにより、ベースURL、標準ヘッダー、タイムアウトを設定でき、各呼び出しで繰り返すことなく、このインスタンスのすべてのリクエストに適用されます。

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Axiosのコード例

リクエスト例は、Axiosの主な使用パターンを示しています。すべての例はasync/await構文を使用しており、.then()チェーンと比較して非同期コードをより読みやすくします。

パラメータ付きGETリクエスト

サーバーからデータを取得するには、axios.getメソッドを使用します。リクエストパラメータはparamsオブジェクトを介して渡され、自動的にクエリ文字列に変換されます。レスポンスには、dataフィールドにデータ、statusにステータス、headersにヘッダーが含まれます。

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('ユーザーの読み込みエラー', error);
    throw error;
  }
}

ボディ付きPOSTリクエスト

サーバーにデータを送信するには、axios.postを使用します。第2引数はデータを含むオブジェクトで、Axiosが自動的にJSONにシリアライズします。Content-Typeはデフォルトでapplication/jsonに設定されます。

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

インターセプター

インターセプターは、各リクエストまたはレスポンスに対して実行されるミドルウェア関数です。認証トークンの追加、リクエストのログ記録、エラーの一元処理が可能です。リクエストインターセプターは、ストレージから取得したトークンを使用してAuthorizationヘッダーを追加します。

// リクエストインターセプター — 認証トークンを追加
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// レスポンスインターセプター — 401エラーを処理
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Axiosのエラーハンドリング

エラーハンドリングはAxiosでは例外メカニズムに基づいています。fetchとは異なり、AxiosはHTTPエラー（4xx、5xx）を自動的にキャッチし、catchブロックに渡します。エラーオブジェクトには、サーバーレスポンス、リクエスト、実行コンテキストに関する情報が含まれます。

3種類のエラーを区別することが重要です：サーバーレスポンスエラー（response）、リクエストエラー（request）、設定エラー（config）。1つ目はHTTP呼び出しが成功したがエラーコードを返した場合、2つ目はサーバーからの応答がない場合、3つ目はリクエスト設定が無効な場合に発生します。

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('レスポンスエラー', error.response.status);
      } else if (error.request) {
        console.warn('サーバーからの応答なし');
      } else {
        console.warn('設定エラー');
      }
    }
  }
}

AxiosとFetch APIの比較

AxiosとネイティブFetch APIの比較は、各技術がいつ適切かを理解するのに役立ちます。Fetchはブラウザに組み込まれたAPIでインストール不要です。Axiosは追加機能を備えたサードパーティライブラリです。単純なリクエストにはfetchで十分ですが、インターセプターと一元化されたエラーハンドリングを必要とする複雑なアプリケーションにはAxiosの方が便利です。

FetchはHTTPエラー（4xx、5xx）を例外として扱いません — response.okを確認する必要があります。FetchはJSONを取得するために2回の.then()呼び出しが必要です：response.json()がデータを含むPromiseを返します。Axiosはこれを自動的に行います。Fetchは追加のポリフィルなしではファイルアップロードの進捗をサポートしません。AxiosにはonUploadProgressとonDownloadProgressが組み込まれています。

Node.jsでは、Fetchはバージョン18から実験的機能として利用可能ですが、AxiosはNode.js 10から安定して動作します。古いNode.jsバージョンをサポートするプロジェクトでは、選択は明らかにAxiosです。複雑なリクエスト処理を必要としない現代のブラウザプロジェクトでは、fetchで十分な場合があります。