用語集 › 🕸️ Web › Fetch API
【フェッチエーピーアイ】

Fetch API とは？

公開:
💡 サーバーとのデータのやりとりを、シンプルかつ現代的にこなすHTTPリクエストの定番
📌 このページのポイント
Fetch API — モダンなHTTPリクエスト ブラウザ fetch(url, options) → Promise Request Response サーバー API / データ JSON / HTML 変換 .json() .text() .blob() XMLHttpRequest（旧） コールバック地獄 / 複雑なAPI 非推奨 Fetch API（現在） Promise / async-await対応 推奨 注意: 404/500でもrejectされない → response.ok のチェックが必要
Fetch APIのイメージ
ひよこ ひよこ
XMLHttpRequestっていうのがあったのに、なんで新しいAPIが必要だったの？
ペンギン先生 ペンギン先生
XHRはコールバック地獄になりやすいし、APIの設計が古くて使いにくかったんだ。Fetch APIはPromiseベースだからasync/awaitと組み合わせてスッキリ書けるし、Service Workerからも使えるように設計されているよ
ひよこ ひよこ
使い方は簡単なの？
ペンギン先生 ペンギン先生
とてもシンプルだよ。fetch('https://api.example.com/data')だけでGETリクエストが送れる。POSTなら第2引数にmethod、body、headersを指定するだけ。レスポンスはresponse.json()でJSONとして受け取れるんだ
ひよこ ひよこ
axiosみたいなライブラリとはどう違うの？
ペンギン先生 ペンギン先生
axiosはFetchをラップして便利機能を追加したライブラリだね。Fetch APIにはリクエストのタイムアウト設定がなかったり、HTTPエラー（404や500）でもrejectされなかったりする点が不便だったんだ。でもAbortControllerでタイムアウトも実装できるし、最近はFetch単体で十分なケースが増えているよ
ひよこ ひよこ
注意すべき点ってある？
ペンギン先生 ペンギン先生
さっき言ったように、404や500のレスポンスでもPromiseはresolveされるから、response.okをチェックする必要があるよ。あとCORSの制約でクロスオリジンのリクエストにはサーバー側の設定が必要なんだ。ネットワークエラーのときだけrejectされるということを覚えておくといいね
ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「Fetch API」って出てきたら「ブラウザからサーバーにリクエストを送るモダンなAPI」と思えればだいたいOK！
📖 おまけ：英語の意味
「Fetch API」 ＝ 取得 API
💬 Fetchは「取ってくる」という意味。サーバーからデータを「取ってくる」ためのAPIだよ
🔗 あわせて読みたい
← 用語集にもどる