3種類の結果を実際に受け取る
「try/catchで囲んだから、404もcatchへ入るはず」と考えると、存在しないURLへの対応を見落とします。下の自作例は、同じサイト内の静的ファイルを1回ずつ読む小さな実験です。表示する数字を作り置きせず、受け取ったResponseから状態を読みます。
状態を見てから本文を読む
- 「200・正しいJSON」を選び、「1回試す」を押します。HTTP 200、ok=true、本文のメッセージを確認します。
- 「404・存在しないファイル」へ変えて押します。Responseは返りますが、ok=falseです。例では明示的にthrowし、本文を読む前に止めます。
- チェックを外して404を試すと、HTTP段階で止めなくなります。その後の本文がJSONでなければ、今度はJSON読込の段階で失敗します。
- チェックを戻し「200・JSONとして読めない本文」を選びます。HTTPは成功でも、JSON読込は別に失敗することが分かります。
const response = await fetch(url);
if (!response.ok) {
throw new Error("HTTP " + response.status);
}
const data = await response.json();MDNのFetch APIの説明でも、404などのHTTPエラーだけではfetchのPromiseは拒否されないため、状態を確認する方法を案内しています。上のサンプルはさらに、HTTPの失敗とJSON読込の失敗を表示で分けています。ネットワーク障害やCORSの失敗を今回すべて再現したわけではありません。
エラー処理と料金対策は別
ボタン1回でGETは1回。自動再試行や定期通信は入れていません。失敗時に待たず繰り返す仕組みを足すと、原因が直らないまま通信だけ増えることがあります。この例はエラーの読み分け用で、利用上限・認証・レート制限を実装したAPIではありません。
2026年10月18日、ローカルと公開先で200・404・JSON読込失敗を検証する構成にしました。ZIPは展開し、既存の開発用HTTPサーバーから開いてください。file://で直接開く方法はfetchの検証に向きません。保存版に存在しないファイルは入れておらず、その404応答本文の形式はサーバーによって変わります。
Xの2026年10月13日の関連投稿や直近の検索でも、この疑問を確認しました。反響の大きさを根拠にせず、説明はMDNと自作例の結果で確かめています。元投稿の図版・文章は転載していません。HTML・JSON・説明は編集部の自作・CC0。スマホ実機、すべての通信失敗、外部APIの課金条件は未確認です。