JavaScript：fetchとJSON

出力 == 田中

await fetch(...) で応答を取り、await res.json() でデータに変換する。await が2回必要。

async function main() {
  const res = await fetch(`${API}/users/1`);
  const data = await res.json();
  console.log(data.name);
}

main();

await が2回必要なのがポイント。1回目は通信の完了、2回目は本文の読み取りを待っている。

解答 == B

「サーバーから返事が来た」ことをどう解釈するか。

B

fetch が失敗と見なすのはネットワークに繋がらないときだけ。404も500も「返事が来た」ので成功扱いになる。だから res.ok の確認が必須。

出力 == 200 / true

res.status と res.ok をそのまま使う。json() は不要。

async function main() {
  const res = await fetch(`${API}/users/1`);
  console.log(`${res.status} / ${res.ok}`);
}

main();

res.ok はステータスが200番台なら true。細かい番号を見る前に、まずこれで成否を判定するのが簡潔。

async function main() {
  const res = await fetch(`${API}/users/1`);
  const data = await res.____();
  console.log(data.name);
}

main();

出力 == 田中

JSON形式で読み取るメソッド。

json

文字列として読みたいときは res.text()。どちらも await が必要で、本文の読み取り自体が非同期処理になっている。

解答 == C

サーバーまで届いたかどうかが分かれ目。

C

オフライン、URLのつづりミス、ドメインが存在しない——そもそも通信が成立しない場合だけ。エラーの種類は TypeError になる。

出力 == 取得失敗（404）

if (!res.ok) で判定し、res.status を埋め込む。

async function main() {
  const res = await fetch(`${API}/nothing`);

  if (!res.ok) {
    console.log(`取得失敗（${res.status}）`);
  }
}

main();

この確認を書かないと、404のHTMLをJSONとして読もうとしてエラーになる。原因が分かりにくいバグになるので、必ず最初に書く。

async function main() {
  const res = await fetch(`${API}/users`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.____({ name: "新規ユーザー" }),
  });

  console.log(res.status);
}

main();

出力 == 200

オブジェクトをJSON文字列にするメソッド。末尾に fy が付く。

stringify

body には文字列しか渡せない。オブジェクトをそのまま渡すと [object Object] という文字列が送られてしまう。

解答 == B

json() も非同期のメソッド。

B

JS15で学んだとおりawait を忘れると Promise が入る。data.name が undefined になったら、まず await の付け忘れを疑う。

出力2行。1. 田中 / 2. 鈴木

返ってくるのは配列なので、そのまま forEach や for...of で回せる。

async function main() {
  const res = await fetch(`${API}/users`);
  const users = await res.json();

  users.forEach((u, i) => {
    console.log(`${i + 1}. ${u.name}`);
  });
}

main();

JSONの配列は、変換した時点でただのJavaScriptの配列になる。JS09の map や filter がそのまま使える。

出力 == 通信できません

try / catch で囲む。ネットワークエラーは catch に飛ぶ。

async function main() {
  try {
    await fetch("http://127.0.0.1:9999/x");
  } catch (e) {
    console.log("通信できません");
  }
}

main();

catch に来るのはこのケースだけ。404などのHTTPエラーとは扱いが違うので、両方を書いて初めて通信処理が完成する。

出力2行が完全一致

!res.ok なら throw し、catch で null を返す。呼び出し側で null を判定する。

async function fetchJson(url) {
  try {
    const res = await fetch(url);

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

    return await res.json();
  } catch (e) {
    return null;
  }
}

async function main() {
  const user = await fetchJson(`${API}/users/1`);
  console.log(user === null ? "取得できませんでした" : user.name);

  const missing = await fetchJson(`${API}/nothing`);
  console.log(missing === null ? "取得できませんでした" : missing.name);
}

main();

成功か null かに単純化して返す設計。呼び出す側は通信の細かい事情を知らなくてよくなり、if 1つで分岐できる。実務でよく使われる形。

出力3行が完全一致

try の中で res.ok を判定し、HTTPエラーは自分で出力する。catch に来たものだけが通信エラー。

async function check(label, url) {
  try {
    const res = await fetch(url);

    if (!res.ok) {
      console.log(`[${label}] HTTPエラー：${res.status}`);
      return;
    }

    console.log(`[${label}] 成功`);
  } catch (e) {
    console.log(`[${label}] 通信エラー`);
  }
}

async function main() {
  await check("users/1", `${API}/users/1`);
  await check("nothing", `${API}/nothing`);
  await check("bad-host", "http://127.0.0.1:9999/x");
}

main();

HTTPエラーと通信エラーは別物。前者はサーバーに届いたうえでの応答、後者はそもそも届いていない。監視やログでは、この2つを区別して記録する。

出力2行が完全一致

res.json() が SyntaxError を投げるので、try で囲めば捕まえられる。

async function load(url) {
  try {
    const res = await fetch(url);
    const data = await res.json();
    console.log(data.name);
  } catch (e) {
    console.log("JSONの解析に失敗しました");
  }
}

async function main() {
  await load(`${API}/broken`);
  await load(`${API}/users/1`);
}

main();

サーバーがHTMLのエラーページを返すことは実際にある。ステータスが200でも中身が壊れている可能性があるので、json() も try の中に入れておく。

出力2行が完全一致

Promise.all の中で fetch と json() をまとめて行う関数を渡す。分割代入で受け取る。

const fetchJson = async (url) => {
  const res = await fetch(url);
  return res.json();
};

async function main() {
  const [user, list] = await Promise.all([
    fetchJson(`${API}/users/1`),
    fetchJson(`${API}/users`),
  ]);

  console.log(`ユーザー：${user.name}`);
  console.log(`一覧：${list.length}件`);
}

main();

互いに依存しない通信は並列にする（JS15）。順に await すると待ち時間が足し算になるが、Promise.all なら遅いほうの時間で済む。

出力 == 送信成功（200）

fetch の第2引数に { method, headers, body } を渡す。body は JSON.stringify で文字列にする。

async function main() {
  const res = await fetch(`${API}/users`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      name: "新規ユーザー",
      email: "new@example.com",
    }),
  });

  if (res.ok) {
    console.log(`送信成功（${res.status}）`);
  } else {
    console.log(`送信失敗（${res.status}）`);
  }
}

main();

3点セット（method・headers・body）がPOSTの基本形。Content-Type を書かないとサーバーがJSONだと認識せず、データを受け取れないことがある。