Web開発者の必需品！ブラウザとサーバーの両方で使えるHTTP通信ライブラリ — axios

アーキテクチャ・仕組み

axiosはPromiseベースのHTTPクライアントで、環境に応じて内部の通信方式（アダプター）を自動的に切り替えます:

• ブラウザ: XMLHttpRequest（XHR）またはFetch API
• Node.js: http/https モジュール

adapter オプションで 'xhr'、'fetch'、'http' を明示的に指定したり、配列で優先順位を設定することも可能です。

対応環境・プラットフォーム

• ブラウザ: Chrome、Firefox、Safari、Opera、Edge（いずれも最新版）
• Node.js: http/httpsモジュール経由
• Tauri: カスタムfetchアダプター経由で対応
• SvelteKit: カスタムfetchアダプター経由で対応
• HTTP/2: 専用オプションでサポート

主要な機能一覧

• リクエストメソッドエイリアス: axios.get(), axios.post(), axios.put(), axios.delete(), axios.patch() など
• インターセプター: リクエスト・レスポンスの前後にカスタム処理を挟める（認証トークンの自動付与など）
  • リクエストインターセプターはLIFO（後入れ先出し）、レスポンスインターセプターはFIFO（先入れ先出し）で実行
  • synchronous フラグや runWhen 関数で条件付き実行も可能
• 自動JSON変換: リクエスト/レスポンスのJSONデータを自動でシリアライズ・パース
• FormData自動シリアライズ: multipart/form-data と x-www-form-urlencoded への自動変換
• リクエストキャンセル: AbortController によるキャンセル機能
• XSRF防御: クロスサイトリクエストフォージェリ対策のクッキー・ヘッダー自動設定
• 進捗イベント: アップロード/ダウンロードの進捗取得（onUploadProgress, onDownloadProgress）
• レート制限: maxRate オプションによるアップロード/ダウンロード速度制限（Node.jsのみ）
• AxiosHeaders: ヘッダーを操作するための専用クラス
• Fetchアダプター: ブラウザのFetch APIを直接利用可能

設定オプション（主要なもの）

エラーハンドリング

axiosは独自のエラーコード体系を持ち、ERR_NETWORK、ERR_BAD_REQUEST、ERR_CANCELED、ETIMEDOUT など詳細なエラー種別を提供します。error.response（サーバー応答あり）、error.request（応答なし）の判別も可能です。

TypeScript対応

axiosはTypeScriptの型定義を内蔵しており、追加の型定義パッケージは不要です。レスポンスのジェネリクス型指定にも対応しています。

ライセンス

MITライセンスで公開されており、商用利用を含め自由に使用できます。

セマンティックバージョニング

axiosは安定版に到達するまで、マイナーバージョンで破壊的変更が入る可能性があります。

パッケージマネージャーでインストール

npmの場合:

npm install axios

yarnの場合:

yarn add axios

pnpmの場合:

pnpm add axios

CDNで直接読み込む場合

<script src="https://cdn.jsdelivr.net/npm/axios@1.13.2/dist/axios.min.js"></script>

基本的な使い方

import axios from 'axios';

// GETリクエスト
const response = await axios.get('/user?ID=12345');
console.log(response.data);

// POSTリクエスト
const res = await axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
});