async / await

// ── 基本形: async 関数は常に Promise を返す ─────────────
// await を使うと「処理が完了するまで待つ」
async function fetchUser(id: number) {
  const response = await fetch('/api/users/' + id); // ← ここで一時停止

  if (!response.ok) {
    throw new Error('取得失敗: HTTP ' + response.status);
  }

  const user = await response.json(); // JSON変換も await できる
  return user; // Promise<User> として返る
}

// ── try/catch でエラー処理 ──────────────────────────
async function safelyFetchUser(id: number) {
  try {
    const user = await fetchUser(id); // 成功
    return user;
  } catch (error) {
    console.error('エラー:', error);
    return null; // エラー時は null を返す
  }
}

// ── React での使い方（useEffect 内） ─────────────────
useEffect(() => {
  // useEffect 内では async 関数を別に定義して呼ぶのがルール
  async function load() {
    const user = await safelyFetchUser(userId);
    setUser(user);
  }
  load();
}, [userId]);