axios

Axios - クイックリファレンス

このスキルを使用する場面

• JavaScript／TypeScript アプリケーションでの HTTP リクエスト
• 認証／エラー処理のインターセプターの設定
• 特定の API 用の Axios インスタンスの作成
• リクエスト／レスポンスの変換
• ファイルのアップロードとダウンロード

詳細情報：包括的なドキュメントを参照するには、technology: axios を指定して mcp__documentation__fetch_docs を使用してください。

セットアップの基本

npm install axios

基本パターン

GET リクエスト

import axios from 'axios';

const response = await axios.get('/api/users');
const users = response.data;

// With params
const response = await axios.get('/api/users', {
  params: { page: 1, limit: 10 }
});

POST リクエスト

const response = await axios.post('/api/users', {
  name: 'John',
  email: '[email protected]'
});

Axios インスタンス

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

// Use instance
const users = await api.get('/users');

インターセプター

// Request interceptor (add auth token)
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Response interceptor (handle errors)
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Handle unauthorized
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

TypeScript の型

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

const response = await api.get<User[]>('/users');
const users: User[] = response.data;

エラー処理

try {
  const response = await api.get('/users');
} catch (error) {
  if (axios.isAxiosError(error)) {
    console.error('API Error:', error.response?.data);
    console.error('Status:', error.response?.status);
  }
}

このスキルを使用しない場面

• ネイティブ Fetch API のパターン（http-clients スキルを使用してください）
• ky または ofetch の設定（http-clients スキルを使用してください）
• GraphQL クライアントのセットアップ（graphql-codegen スキルを使用してください）
• tRPC クライアントの設定（trpc スキルを使用してください）
• WebSocket 接続

アンチパターン

アンチパターン	問題点	解決策
タイムアウトが設定されていない	リクエストが無期限に停止します	axios.create() でタイムアウトを設定します
ベース URL のハードコード	環境への依存が生じます	baseURL には環境変数を使用します
エラーインターセプターがない	エラー処理が一貫しません	レスポンスエラーインターセプターを追加します
レスポンスに型を指定していない	型安全性が失われます	ジェネリクスを使用します：axios.get<User>()
認証ロジックの重複	保守の負担になります	リクエストインターセプターを使用します
レスポンスのステータスを無視する	気づかないまま失敗します	response.status を確認するか、validateStatus を使用します
リクエストのキャンセル機能がない	アンマウント時にメモリリークが発生します	AbortController を使用します
機密データをログに記録する	セキュリティ上のリスクがあります	ログからトークンやパスワードを除外します

トラブルシューティングのクイックガイド

問題	考えられる原因	解決策
CORS エラー	サーバーがオリジンを許可していません	サーバーで CORS を設定し、プリフライトを確認します
401 Unauthorized	トークンがない、または無効です	インターセプターを確認し、トークンを検証します
Network Error	サーバーに到達できない、または CORS の問題です	baseURL、サーバーの状態、CORS の設定を確認します
タイムアウトエラー	リクエストに時間がかかりすぎています	タイムアウトを延長するか、エンドポイントを最適化します
リクエストがキャンセルされた	AbortController が実行されました	コンポーネントのライフサイクルを確認し、必要なリクエストをキャンセルしないようにします
型エラー	レスポンスの形状が一致しません	API のレスポンスが型定義と一致していることを確認します
インターセプターが実行されない	リクエスト後にインターセプターが追加されました	クライアントのセットアップ時にインターセプターを追加します
メモリリーク	アンマウント時にリクエストをキャンセルしていません	useEffect のクリーンアップを使用します