axios

Axios HTTP クライアント

Axios は、ブラウザーと Node.js 向けの Promise ベースの HTTP クライアントです。HTTP リクエストの送信とレスポンスの処理を行うためのシンプルな API を提供します。

クイックスタート

基本的な GET リクエスト

import axios from "axios";

// Promise-based
axios
  .get("/user?ID=12345")
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

// Async/await
async function getUser() {
  try {
    const response = await axios.get("/user?ID=12345");
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

基本的な POST リクエスト

axios
  .post("/user", {
    firstName: "John",
    lastName: "Doe",
  })
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

よく使われるパターン

カスタムインスタンス

const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

// Use the instance
api.get("/users").then((response) => console.log(response.data));

設定を指定したリクエスト

axios({
  method: "post",
  url: "/user/12345",
  data: {
    firstName: "Fred",
    lastName: "Flintstone",
  },
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer token",
  },
});

並行リクエスト

function getUserAccount() {
  return axios.get("/user/12345");
}

function getUserPermissions() {
  return axios.get("/user/12345/permissions");
}

Promise.all([getUserAccount(), getUserPermissions()]).then(
  ([account, permissions]) => {
    console.log("Account:", account.data);
    console.log("Permissions:", permissions.data);
  },
);

エラー処理

基本的なエラー処理

axios.get("/user/12345").catch(function (error) {
  if (error.response) {
    // Server responded with error status
    console.log(error.response.data);
    console.log(error.response.status);
    console.log(error.response.headers);
  } else if (error.request) {
    // Request was made but no response received
    console.log(error.request);
  } else {
    // Error in request setup
    console.log("Error", error.message);
  }
});

カスタムエラーステータスの検証

axios.get("/user/12345", {
  validateStatus: function (status) {
    return status < 500; // Resolve only if status < 500
  },
});

インターセプター

リクエストインターセプター

axios.interceptors.request.use(
  (config) => {
    // Add auth token to headers
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

レスポンスインターセプター

axios.interceptors.response.use(
  (response) => {
    // Transform response data
    return response.data;
  },
  (error) => {
    // Handle common errors
    if (error.response?.status === 401) {
      // Redirect to login
      window.location.href = "/login";
    }
    return Promise.reject(error);
  },
);

認証リトライパターン

const api = axios.create({ baseURL: "/api" });

api.interceptors.response.use(undefined, async (error) => {
  if (error.response?.status === 401) {
    await refreshToken();
    return api(error.config); // Retry original request
  }
  throw error;
});

リクエスト／レスポンスの設定

共通の設定オプション

const config = {
  url: "/user",
  method: "get",
  baseURL: "https://api.example.com",
  headers: { "X-Requested-With": "XMLHttpRequest" },
  params: { ID: 12345 },
  data: { firstName: "John" },
  timeout: 5000,
  responseType: "json",
  withCredentials: false,
  validateStatus: (status) => status >= 200 && status < 300,
};

FormData のアップロード

const formData = new FormData();
formData.append("file", fileInput.files[0]);
formData.append("username", "john");

axios.post("/upload", formData, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
});

ダウンロードの進行状況

axios.get("/download/file", {
  onDownloadProgress: (progressEvent) => {
    const percentCompleted = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total,
    );
    console.log(`Download: ${percentCompleted}%`);
  },
});

レスポンススキーマ

Axios のレスポンスには、次の内容が含まれます。

{
  data: {}, // Server response data
  status: 200, // HTTP status code
  statusText: 'OK', // HTTP status message
  headers: {}, // Response headers
  config: {}, // Request config
  request: {} // Request object
}

ベストプラクティス

1. API や設定ごとにインスタンスを使用する
2. 認証、ログ記録、エラー処理にはインターセプターを実装する
3. リクエストがハングしないようにタイムアウトを設定する
4. 適切なレベルでエラーを処理する
5. 型安全性を高めるためにTypeScript を使用する
6. コンポーネントのアンマウント時にリクエストをキャンセルする

TypeScript のサポート

import axios, { AxiosResponse } from "axios";

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

const response: AxiosResponse<User> = await axios.get<User>("/user/123");
const user: User = response.data;