JavaScript 逆引き集 | fetch で HTTP GET

JavaScript JavaScript
スポンサーリンク

fetch で HTTP GET の基本と実践

fetch は「URLへリクエストを送り、レスポンスを Promise として受け取る」ための API です。GET/POST などの HTTP メソッド、ヘッダー設定、JSON の扱い、エラーハンドリングまで一通りこなせます。レスポンスはまず Response オブジェクトで返り、本文の JSON 取得には response.json() を使います。また、fetch と response.json() はどちらも Promise を返すため、await や then で順次処理します。

基本の書き方

// もっとも基本的な GET → JSON 取得
const r = await fetch("https://api.example.com/items"); // Response
if (!r.ok) throw new Error(`HTTP ${r.status}`);
const json = await r.json(); // 本文をJSONとしてパース
console.log(json);
JavaScript
  • Response.ok: ステータスが 200–299 なら true。失敗時はエラー扱いにしておくとシンプルです。
  • JSON 取得: response.json() は本文を JSON としてパースする Promise を返します。
  • Promise: fetch も json() も非同期なので await/then で扱います。

すぐ使えるテンプレート集

クエリパラメータを付ける

const url = new URL("https://api.example.com/search");
url.search = new URLSearchParams({ q: "js", page: 2 }).toString();

const r = await fetch(url);
const json = await r.json();
JavaScript

ヘッダーを付ける（認証トークンなど）

const r = await fetch("https://api.example.com/me", {
  headers: { Authorization: "Bearer xxx", Accept: "application/json" },
});
const me = await r.json();
JavaScript

エラーハンドリング（HTTP失敗とネットワーク例外）

try {
  const r = await fetch("https://api.example.com/items");
  if (!r.ok) throw new Error(`HTTP ${r.status}`);
  const json = await r.json();
  console.log(json);
} catch (e) {
  console.error("取得失敗:", e.message);
}
JavaScript

タイムアウト（AbortController）

const controller = new AbortController();
const id = setTimeout(() => controller.abort(), 3000);

try {
  const r = await fetch("https://api.example.com/slow", { signal: controller.signal });
  clearTimeout(id);
  const json = await r.json();
  console.log(json);
} catch (e) {
  if (e.name === "AbortError") console.error("タイムアウト");
  else console.error("失敗:", e.message);
}
JavaScript

並列で複数の GET をまとめて待つ

const [users, posts] = await Promise.all([
  fetch("https://api.example.com/users").then(r => r.json()),
  fetch("https://api.example.com/posts").then(r => r.json()),
]);
JavaScript

実務でのポイント

  • HTTP 状態の確認: response.ok で 2xx を判定し、失敗は例外にして共通ハンドリングへ流すのが定石ですr。
  • JSON とそれ以外: JSON は json()、テキストは text(), バイナリは arrayBuffer()/blob() を使い分けます。
  • CORS の考慮: 別オリジンへのアクセスでは CORS 設定に従います（サーバー側の許可が必要）。
  • Node.js での利用: 近年の Node.js にはグローバル fetch があり、フロント・バック双方で同様の書き方が使えます。

よくある落とし穴と対策

  • HTTP 失敗を見落とす: 200–299 以外は ok=false。明示的にチェックして例外化する。
    • 対策: if (!r.ok) throw new Error(...)。
  • JSON パースの二重非同期:fetch と response.json() は両方 Promise。
    • 対策: await r.json() と await fetch(...) をセットで使う。
  • タイムアウト未設定: デフォルトは無期限待機。
    • 対策: AbortController で明示的に締め切りを設ける。
  • CORS によるブロック: ブラウザ側では回避不能。
    • 対策: サーバーで適切な CORS ヘッダーを設定。

練習問題（手を動かして覚える）

// 1) 基本GET＋HTTPチェック
async function ex1() {
  const r = await fetch("https://api.example.com/ping");
  if (!r.ok) throw new Error(`HTTP ${r.status}`);
  console.log(await r.text());
}

// 2) クエリ付き検索
async function ex2() {
  const url = new URL("https://api.example.com/search");
  url.search = new URLSearchParams({ q: "tokyo", limit: 5 }).toString();
  const r = await fetch(url);
  console.log(await r.json());
}

// 3) ヘッダー付き取得（JSON前提）
async function ex3() {
  const r = await fetch("https://api.example.com/me", {
    headers: { Authorization: "Bearer demo", Accept: "application/json" },
  });
  console.log(await r.json());
}

// 4) タイムアウト（3秒）付きGET
async function ex4() {
  const ac = new AbortController();
  const t = setTimeout(() => ac.abort(), 3000);
  try {
    const r = await fetch("https://api.example.com/slow", { signal: ac.signal });
    clearTimeout(t);
    console.log(await r.json());
  } catch (e) {
    console.log(e.name === "AbortError" ? "timeout" : e.message);
  }
}
JavaScript

直感的な指針

  • まず fetch → HTTP 状態チェック → response.json()。
  • クエリとヘッダーはオプションで明示する。
  • タイムアウトや並列取得を組み合わせて、扱いやすく安全に。
  • CORS や Node.js の環境差は基本の仕組みを理解して対処。
スポンサーリンク
タイトルとURLをコピーしました