女性向けエンジニアスクール
3秒でわかる
ブラウザに標準で入っているHTTP通信の関数。Promiseを返すので、非同期の取得処理を await で直線的に書けるのが利点です。
もう少し詳しく
どういうものか
Fetch API は、ブラウザからHTTPリクエストを送るための標準機能です。fetch(url) を呼ぶと Promise が返り、解決するとレスポンスを表すオブジェクトが得られます。本文はまだ読み込まれておらず、json() や text() を呼んだ時点で読み出されます。二段構えになっているのは、巨大な本文をすべて読む前にステータスやヘッダーを判断できるようにするためです。Node.js でも18以降は同じ関数が使えます。
なぜ必要か
画面を再読み込みせずにデータを差し替えるには、JavaScriptから通信する手段が要ります。以前は XMLHttpRequest を使い、コールバックを積み重ねる書き方が必要でした。Fetch は Promise を返すため await で直線的に書け、エラー処理も try にまとめられます。外部ライブラリを入れずに済む点も利点です。中断や時間切れの指定も標準の仕組みで書けるため、実装が環境をまたいで通用します。
具体例
async function loadUser(id) {
const res = await fetch(`/api/users/${id}`, {
headers: { Accept: "application/json" },
});
if (!res.ok) {
throw new Error(`失敗しました status=${res.status}`);
}
return res.json();
}
// 送る側
await fetch("/api/orders", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ itemId: 3, qty: 2 }),
});つまずきやすいところ
404 や 500 が返っても Promise は拒否されません。通信自体は成功しているからです。res.ok を必ず確認しないと、エラーページのHTMLを JSON として読もうとして別のエラーになり、原因の切り分けが遠回りになります。次に多いのがCORSで、これはブラウザ側の制限なのでサーバーの応答ヘッダーを直さないと解決しません。またJSONを送るときにヘッダーを付け忘れると、サーバー側で本文が空に見えます。
似た用語との違い
| 手段 | 特徴 |
|---|---|
| Fetch API | 標準機能でPromiseを返す |
| XMLHttpRequest | 古い方式でコールバック中心 |
| axios | 外部ライブラリでエラー時に自動で例外を投げる |
覚え方
返ってきた時点では、まだ届いたという事実しか分かりません。中身を読むのも、成功か失敗かを決めるのも、こちら側の仕事です。
