【JavaScript】fetch API の使い方｜GET・POST・async/await・エラーハンドリング・AbortController・実務パターンまで解説

fetch("https://api.example.com/users")
  .then(response => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error("エラー:", error));

async function fetchUsers() {
  try {
    const response = await fetch("https://api.example.com/users");

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

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("エラー:", error);
  }
}

fetchUsers();

async function createUser(user) {
  const response = await fetch("https://api.example.com/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(user)
  });

  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return await response.json();
}

const newUser = await createUser({ name: "田中", email: "tanaka@example.com" });
console.log(newUser);

const form = document.getElementById("myForm");

form.addEventListener("submit", async (e) => {
  e.preventDefault();

  const response = await fetch("/api/submit", {
    method: "POST",
    body: new FormData(form) // Content-Type は自動設定される
  });

  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const result = await response.json();
  console.log(result);
});

const controller = new AbortController();

async function fetchData() {
  try {
    const response = await fetch("/api/data", {
      signal: controller.signal
    });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    if (error.name === "AbortError") {
      console.log("リクエストがキャンセルされました");
    } else {
      console.error("エラー:", error);
    }
  }
}

fetchData();

// 必要なタイミングでキャンセル
controller.abort();

async function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal
    });
    return response;
  } finally {
    clearTimeout(timeoutId);
  }
}

// 使用例: 5秒でタイムアウト
const res = await fetchWithTimeout("/api/slow-endpoint", {}, 5000);

async function renderUsers() {
  const list = document.getElementById("userList");
  list.textContent = "読み込み中...";

  try {
    const res = await fetch("/api/users");
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const users = await res.json();

    list.innerHTML = users
      .map(u => `<li>${u.name} (${u.email})</li>`)
      .join("");
  } catch (error) {
    list.textContent = "データの取得に失敗しました";
    console.error(error);
  }
}

renderUsers();

async function api(endpoint, options = {}) {
  const defaultHeaders = { "Content-Type": "application/json" };

  const response = await fetch(endpoint, {
    headers: { ...defaultHeaders, ...options.headers },
    ...options,
    body: options.body ? JSON.stringify(options.body) : undefined
  });

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

  return response.json();
}

// 使用例
const users = await api("/api/users");
const newUser = await api("/api/users", {
  method: "POST",
  body: { name: "田中", email: "tanaka@example.com" }
});

async function fetchWithRetry(url, options = {}, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const res = await fetch(url, options);
      if (res.ok) return res;
      if (res.status < 500) throw new Error(`HTTP ${res.status}`); // 4xx はリトライしない
    } catch (error) {
      if (i === retries - 1) throw error;
      await new Promise(r => setTimeout(r, 1000 * (i + 1))); // 指数バックオフ
    }
  }
}