HTTPとAPI基礎 / 約25分

fetchとasync/await: ブラウザからAPIを叩く

なぜこれを学ぶか

「サーバーからデータを取ってきてページに表示する」は現代Webの基本パターンです。fetchとasync/awaitを使いこなすことで、あらゆるWebアプリの通信処理が書けるようになります。

fetch() はブラウザ標準のHTTP通信関数です。fetch(url) は Promise を返し、レスポンスが来ると解決されます。async/await はPromiseを同期的に書ける構文です。

` async function getData() { const res = await fetch("/api/users"); const data = await res.json(); return data; } ` await res.json() でレスポンスをJSONとして解析します。res.text() でテキスト取得、res.ok でステータス200-299か確認できます。

POSTでデータを送る場合: fetch(url, { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify(data) })。Content-Typeヘッダーを忘れるとサーバーがJSONと認識できません。

エラーハンドリング が重要です。fetch() 自体はネットワークエラー以外ではrejectされません——res.ok が false でも then に進みます。if (!res.ok) throw new Error(...) で明示的にエラーを投げる必要があります。

try/catch でエラーを受け取ります。ネットワーク断・JSON解析失敗・サーバーエラーを1か所でハンドリングできます。ユーザーへの適切なフィードバック（「通信エラーが発生しました」等）を忘れないこと。

重要ポイント

res.ok チェックを忘れず、4xx/5xxを明示的にthrowする
POST送信時は Content-Type: application/json ヘッダーが必要
try/catch で通信エラー全体をキャッチする

理解度チェック

選ぶと即座に解説が表示されます。

以下のコードはAPIから404が返った時にどう振る舞うか？ `const res = await fetch("/api/item/999"); const data = await res.json();`

ヒントを見る

fetchはHTTPエラーコードを受け取っても例外を投げません。`res.ok` はどんな状態でしょうか。

コーディング演習実際に書く

APIクライアント関数を作成してください。モックfetch（引数に渡される）を使ってGETリクエストを送り、成功時は`{ok: true, data: レスポンスJSON}`、失敗時（HTTPエラー or 例外）は`{ok: false, error: エラーメッセージ文字列}`を返す async 関数。

async function fetchApi(url, mockFetch)

模範解答（読んで理解したら、自力で書き直してみましょう）

async function fetchApi(url, mockFetch) {
  try {
    const res = await mockFetch(url)
    if (!res.ok) return { ok: false, error: 'HTTP ' + res.status }
    const data = await res.json()
    return { ok: true, data }
  } catch (e) {
    return { ok: false, error: e.message }
  }
}

スキルセルフチェック

このレッスンの内容をどの程度理解できましたか？

弱点マップで全体を確認する

前のレッスン次のレッスン