Fetch API

Fetch API とは

Fetch API は、ブラウザと Node.js (v18 以降) で HTTP リクエストを送信するためのモダンな API である。Promise ベースで、XMLHttpRequest と比較してシンプルな記法で非同期通信を行える。

基本的な使い方

// GET リクエスト
const response = await fetch('https://api.example.com/users');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const users: User[] = await response.json();

// POST リクエスト
const response = await fetch('https://api.example.com/orders', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ userId: '123', items: [{ productId: 'abc', qty: 1 }] }),
});

fetch の注意点

HTTP エラーで reject しない

// ❌ fetch は 404 や 500 でも reject しない
const response = await fetch('/api/users/999');
// response.ok === false, response.status === 404 だが、例外は投げない

// ✅ response.ok をチェック
if (!response.ok) {
  throw new Error(`API error: ${response.status} ${response.statusText}`);
}

タイムアウト

fetch にはデフォルトのタイムアウトがない。AbortController で設定する。

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000);
const response = await fetch(url, { signal: controller.signal });

XMLHttpRequest との比較

観点	Fetch API	XMLHttpRequest
構文	Promise ベース	コールバックベース
ストリーミング	ReadableStream 対応	非対応
リクエストキャンセル	AbortController	abort()
Cookie	デフォルトで same-origin のみ	デフォルトで送信
プログレス	ReadableStream で実装	onprogress イベント

fetch はブラウザだけでなく Node.js 18 以降でもグローバルに利用可能で、Lambda などサーバーサイドでも使える。

Fetch API の理解を深めるには関連書籍が参考になる。