fetch APIの使い方｜非同期通信の基本からエラー処理まで

// 最小の書き方
fetch('https://api.example.com/posts')
  .then(response => response.json())   // 中身をJSONとして取り出す
  .then(data => console.log(data))     // 取り出した結果を使う
  .catch(error => console.error(error));

async function getPosts() {
  try {
    const response = await fetch('https://api.example.com/posts');
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('取得に失敗しました:', error);
  }
}

getPosts();

// 危険な書き方：404でもエラーにならない
async function bad() {
  try {
    const res = await fetch('https://api.example.com/not-found'); // 404
    const data = await res.json();   // ここでJSON解析エラーになることも
    console.log(data);
  } catch (e) {
    console.error(e);   // 期待した場所で捕まらない
  }
}

// 正しい書き方：res.ok を必ず確認する
async function getPosts() {
  const res = await fetch('https://api.example.com/posts');

  if (!res.ok) {
    // 200〜299以外はここで弾く
    throw new Error(`HTTPエラー: ${res.status} ${res.statusText}`);
  }

  return await res.json();
}

async function renderPosts() {
  const list = document.querySelector('#post-list');
  list.textContent = '読み込み中…';

  try {
    const res = await fetch('https://api.example.com/posts?limit=10');
    if (!res.ok) throw new Error(`HTTPエラー: ${res.status}`);

    const posts = await res.json();

    // 一度に組み立ててから差し込む（描画回数を減らす）
    list.innerHTML = posts
      .map(post => `<li><a href="${post.url}">${post.title}</a></li>`)
      .join('');
  } catch (error) {
    list.textContent = 'データを取得できませんでした。時間をおいてお試しください。';
    console.error(error);
  }
}

document.addEventListener('DOMContentLoaded', renderPosts);

const params = new URLSearchParams({
  category: 'css',
  limit: 10,
  keyword: '中央寄せ',    // 日本語も自動でエンコードされる
});

const res = await fetch(`https://api.example.com/posts?${params}`);

async function sendContact(formData) {
  const res = await fetch('https://api.example.com/contact', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      name: formData.name,
      email: formData.email,
      message: formData.message,
    }),
  });

  if (!res.ok) throw new Error(`送信に失敗しました: ${res.status}`);
  return await res.json();
}

const form = document.querySelector('#contact-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();   // ページ遷移を止める

  const res = await fetch('/api/contact', {
    method: 'POST',
    body: new FormData(form),   // Content-Typeは自動で付く
  });

  if (res.ok) {
    form.reset();
    alert('送信しました');
  }
});

// テキストとして取得
const html = await (await fetch('/parts/header.html')).text();

// 画像を取得して表示する
const res = await fetch('/img/photo.jpg');
const blob = await res.blob();
document.querySelector('#preview').src = URL.createObjectURL(blob);

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

  try {
    const res = await fetch(url, { ...options, signal: controller.signal });
    if (!res.ok) throw new Error(`HTTPエラー: ${res.status}`);
    return await res.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error('通信がタイムアウトしました');
    }
    throw error;
  } finally {
    clearTimeout(timer);   // 成功しても必ず解除する
  }
}

let currentController = null;

async function search(keyword) {
  currentController?.abort();          // 前の検索を中断
  currentController = new AbortController();

  const res = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
    signal: currentController.signal,
  });
  return await res.json();
}

// 遅い書き方：合計3秒かかる
const a = await fetch('/api/a');   // 1秒
const b = await fetch('/api/b');   // 1秒
const c = await fetch('/api/c');   // 1秒

// 速い書き方：最も遅い1本ぶん（約1秒）
const [resA, resB, resC] = await Promise.all([
  fetch('/api/a'),
  fetch('/api/b'),
  fetch('/api/c'),
]);

const results = await Promise.allSettled([
  fetch('/api/a').then(r => r.json()),
  fetch('/api/b').then(r => r.json()),
]);

results.forEach((result, i) => {
  if (result.status === 'fulfilled') {
    console.log(`${i}番目 成功`, result.value);
  } else {
    console.warn(`${i}番目 失敗`, result.reason);
  }
});

Access to fetch at 'https://api.example.com/data' from origin
'https://mysite.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

// これはCORSの解決策ではない
const res = await fetch(url, { mode: 'no-cors' });
console.log(res.status);   // 常に 0。中身も読めない

/**
 * fetchのラッパー。HTTPエラー・タイムアウトを例外として扱う。
 * @param {string} url
 * @param {object} options fetchのオプション
 * @param {number} timeout ミリ秒。既定8秒
 */
async function request(url, options = {}, timeout = 8000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeout);

  try {
    const res = await fetch(url, { ...options, signal: controller.signal });

    if (!res.ok) {
      // サーバーがエラー詳細を返す場合に備えて本文も読む
      let detail = '';
      try {
        detail = await res.text();
      } catch (_) { /* 読めなくても続行 */ }
      throw new Error(`HTTP ${res.status} ${res.statusText} ${detail.slice(0, 120)}`);
    }

    // 本文が無い応答（204など）に備える
    if (res.status === 204) return null;

    const type = res.headers.get('content-type') || '';
    return type.includes('application/json') ? await res.json() : await res.text();
  } catch (error) {
    if (error.name === 'AbortError') throw new Error('通信がタイムアウトしました');
    throw error;
  } finally {
    clearTimeout(timer);
  }
}

// 使い方
const posts = await request('/api/posts');
const created = await request('/api/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: '新しい記事' }),
});

// 公開記事の取得は認証不要
const res = await fetch('/wp-json/wp/v2/posts?per_page=5&_fields=id,title,link');
const posts = await res.json();

document.querySelector('#latest').innerHTML = posts
  .map(p => `<li><a href="${p.link}">${p.title.rendered}</a></li>`)
  .join('');

// 投稿の更新など、書き込み系はnonceを添える
const res = await fetch('/wp-json/wp/v2/posts/123', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-WP-Nonce': window.wpApiSettings.nonce,   // wp_localize_scriptで渡す
  },
  credentials: 'same-origin',   // ログインCookieを送る
  body: JSON.stringify({ title: '新しいタイトル' }),
});

<?php
// functions.php 側でnonceをJSに渡す
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_script( 'my-app', get_stylesheet_directory_uri() . '/app.js', [], null, true );
	wp_localize_script( 'my-app', 'wpApiSettings', [
		'root'  => esc_url_raw( rest_url() ),
		'nonce' => wp_create_nonce( 'wp_rest' ),
	] );
} );

const list = document.querySelector('#post-list');

// 高さを保った状態で読み込み中を表示する
list.style.minHeight = '240px';
list.innerHTML = '<li class="loading">読み込み中…</li>';

try {
  const posts = await request('/wp-json/wp/v2/posts?per_page=5');
  list.innerHTML = posts.map(p => `<li>${p.title.rendered}</li>`).join('');
} catch (e) {
  list.innerHTML = '<li class="error">読み込みに失敗しました。再読み込みしてください。</li>';
} finally {
  list.style.minHeight = '';
}