ツール一覧

💡 記事の下にエディタを用意しています。壊してもOK!

更新日: 2025年3月1日

JavaScriptのfetchでエラーハンドリングする方法

📌

結論

res.ok でエラーをチェックしよう

📝 実際のコードはこちら
const res = await fetch(url);
if (!res.ok) throw new Error('通信エラー');
const data = await res.json();

まとめ

res.okfalse ならHTTPエラー ・エラー時は throw で例外を投げる

演習で試してみよう

fetchのエラーチェックを実装してみましょう。

🧪 ここで試せます ─ 壊しても大丈夫!

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

fetchで取得し、res.okがfalseならエラーとconsole.log、trueならデータのtitleを出力してください。

詰まったらヒント

if (!res.ok) { ... } else { ... }

25pt

エラーハンドリング

fetchで取得し、res.okがfalseならエラーとconsole.log、trueならデータのtitleを出力してください。

エラーをクリックで該当行をハイライト。✕=エラー ⚠=警告 ›=ログ。

ロードマップ · 全解説