APIレスポンスの読み方：JSON・status・headers・body

まず結論

APIレスポンスは、status、headers、bodyに分けて読みます。

JavaScriptでAPIを呼ぶと、画面には「成功」か「失敗」しか出ないことがあります。しかしDevTools Networkを見ると、もっと詳しい情報があります。

Status Code: 200
Content-Type: application/json
Response:
{
  "name": "Ada"
}

status

statusは、HTTP通信の結果を表す番号です。

まず見るのはstatusです。失敗しているのか、成功しているのに画面側で処理できていないのかを分けます。

headers

headersは、レスポンスに関する追加情報です。

よく見るもの:

• Content-Type
• Cache-Control
• Set-Cookie
• Access-Control-Allow-Origin
• Location

JSONを期待しているのに Content-Type がHTMLの場合、APIではなくエラーページが返っていることがあります。

Content-Type: text/html

この状態で response.json() を呼ぶと、JSON解析エラーになることがあります。

body

bodyは、レスポンスの中身です。

JSON APIでは、次のようなデータが返ります。

{
  "id": 1,
  "title": "学習メモ",
  "done": false
}

エラー時にもbodyに理由が入っていることがあります。

{
  "message": "email is required"
}

画面のエラー文だけでなく、NetworkのResponseを確認します。

JSONとは

JSONは、データを文字列としてやり取りするための形式です。

{
  "name": "Ada",
  "skills": ["JavaScript", "SQL"]
}

JavaScriptのオブジェクトに似ていますが、JSONにはルールがあります。

• キーはダブルクォートで囲む
• 文字列もダブルクォート
• コメントは書けない
• 関数は入れられない

fetchで見るポイント

const response = await fetch("/api/posts");

if (!response.ok) {
  throw new Error(`HTTP error: ${response.status}`);
}

const data = await response.json();

fetch は、404や500でも通信自体が完了すると例外にならないことがあります。response.ok や response.status を確認します。

切り分け

まとめ

APIレスポンスは、status、headers、bodyに分けて読みます。JSONが返っているか、エラー理由がbodyにあるか、headersが期待通りかを確認します。

APIが動かない時は、「通信が失敗した」の一言で止めず、何番で、何が返ったのかを見ます。

次に読む記事

• response.ok と status の正しい見方
• DevTools Network の見方
• HTTPステータスコード
• JSON

×

PR

×

PR