Axios は Promise ベースの軽量 HTTP クライアントで、ブラウザと Node.js の両環境で同一 API を提供します。ブラウザでは内部で XMLHttpRequest を、サーバサイドでは Node.js 標準の http モジュールを利用して動作します。

主な機能

• リクエスト／レスポンス インターセプター
• リクエストのキャンセル／タイムアウト
• ネストしたクエリパラメータの自動シリアライズ
• リクエストボディの自動シリアライズ（JSON、FormData、URL エンコード）
• アップロード／ダウンロード進捗イベント
• XSRF トークン対策

インストール

# npm
npm install axios

# yarn
yarn add axios

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

基本的な使い方

GET リクエスト

import axios from 'axios';

// クエリパラメータ付き
axios.get('/api/user', { params: { id: 42 } })
  .then(res => console.log(res.data))
  .catch(console.error);

// async/await
async function fetchUser() {
  try {
    const { data } = await axios.get('/api/user/42');
    return data;
  } catch (err) {
    console.error(err);
  }
}

POST リクエスト

await axios.post('/api/user', {
  name: '山田太郎',
  email: 'taro@example.com'
});

並列リクエスト

const [profile, posts] = await Promise.all([
  axios.get('/api/user/42'),
  axios.get('/api/user/42/posts')
]);

フォーム送信

JSON 形式

const form = document.querySelector('#user-form');
const payload = Object.fromEntries(new FormData(form));

await axios.post('/api/user', payload, {
  headers: { 'Content-Type': 'application/json' }
});

multipart/form-data

const formData = new FormData();
formData.append('avatar', fileInput.files[0]);
formData.append('username', 'taro');

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

URL エンコード

const params = new URLSearchParams();
params.append('grant_type', 'password');
params.append('username', 'taro');
params.append('password', 'secret');

await axios.post('/oauth/token', params);

設定ベースのリクエスト

// 汎用リクエスト
await axios({
  method: 'patch',
  url: '/api/user/42',
  data: { status: 'active' }
});

// ストリームダウンロード（Node.js）
await axios({
  method: 'get',
  url: 'https://example.com/large.zip',
  responseType: 'stream'
}).then(res => res.data.pipe(fs.createWriteStream('large.zip')));

メソッドエイリアス

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])