非同期処理を理解しよう

// Promise を作る
const promise = new Promise<string>((resolve, reject) => {
  // 非同期処理をシミュレーション
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("データを取得しました"); // 成功
    } else {
      reject(new Error("取得に失敗しました")); // 失敗
    }
  }, 1000);
});

// Promise の結果を使う
promise
  .then((result) => {
    console.log(result); // "データを取得しました"
  })
  .catch((error) => {
    console.error(error.message);
  });

// async 関数: Promise を返す関数
async function fetchUserData(userId: number): Promise<string> {
  // await: Promise の結果が返るまで待つ
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();
  return data.name;
}

// 呼び出し
async function main(): Promise<void> {
  const name = await fetchUserData(1);
  console.log(name);
}

main();

// then/catch 版
function getUserOld(id: number): Promise<string> {
  return fetch(`/api/users/${id}`)
    .then((response) => response.json())
    .then((data) => data.name)
    .catch((error) => {
      console.error(error);
      return "Unknown";
    });
}

// async/await 版（推奨: 読みやすい）
async function getUser(id: number): Promise<string> {
  try {
    const response = await fetch(`/api/users/${id}`);
    const data = await response.json();
    return data.name;
  } catch (error) {
    console.error(error);
    return "Unknown";
  }
}

async function fetchData(url: string): Promise<unknown> {
  try {
    const response = await fetch(url);

    // HTTPステータスのチェック
    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    if (error instanceof Error) {
      console.error(`データ取得に失敗: ${error.message}`);
    }
    throw error; // エラーを再スロー
  }
}

// 使用例
async function main(): Promise<void> {
  try {
    const data = await fetchData("https://api.example.com/users");
    console.log("取得成功:", data);
  } catch {
    console.log("取得失敗。リトライします...");
  }
}

try {
  // エラーが起きるかもしれない処理
} catch (error) {
  // エラーが起きたときの処理
} finally {
  // 成功・失敗に関わらず実行される処理（オプション）
}

// GET リクエスト
async function getUsers(): Promise<void> {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();
  console.log(users);
}

// POST リクエスト
async function createUser(name: string, email: string): Promise<void> {
  const response = await fetch("https://jsonplaceholder.typicode.com/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ name, email }),
  });

  const newUser = await response.json();
  console.log("作成完了:", newUser);
}

// レスポンスの型を定義して使う
interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUsers(): Promise<User[]> {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");

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

  const users: User[] = await response.json();
  return users;
}

async function fetchAllData(): Promise<void> {
  // 3つのAPIを同時にリクエスト
  const [users, posts, comments] = await Promise.all([
    fetch("/api/users").then((r) => r.json()),
    fetch("/api/posts").then((r) => r.json()),
    fetch("/api/comments").then((r) => r.json()),
  ]);

  console.log("ユーザー数:", users.length);
  console.log("投稿数:", posts.length);
  console.log("コメント数:", comments.length);
}
// 3つ同時にリクエストするため、逐次実行より高速

async function fetchWithFallback(): Promise<void> {
  const results = await Promise.allSettled([
    fetch("/api/users"),
    fetch("/api/unreliable-service"), // 失敗するかも
    fetch("/api/posts"),
  ]);

  results.forEach((result, index) => {
    if (result.status === "fulfilled") {
      console.log(`リクエスト${index}: 成功`);
    } else {
      console.log(`リクエスト${index}: 失敗 - ${result.reason}`);
    }
  });
}

async function fetchWithRetry(
  url: string,
  maxRetries: number = 3
): Promise<unknown> {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }
      return await response.json();
    } catch (error) {
      console.log(`試行 ${attempt}/${maxRetries} 失敗`);
      if (attempt === maxRetries) {
        throw error;
      }
      // 次のリトライまで待機（exponential backoff）
      await new Promise((resolve) => setTimeout(resolve, 1000 * attempt));
    }
  }
}