🚀 06. async/await — Promise를 동기 코드처럼 읽게 만드는 마법의 실체

// async 함수가 반환하는 것
async function getPostTitle() {
  return "클로저 완전정복"; // 단순 값을 반환해도...
}
 
const result = getPostTitle();
console.log(result); // Promise { '클로저 완전정복' } — Promise로 래핑됨!
 
// .then으로 값 꺼내기
result.then((title) => console.log(title)); // "클로저 완전정복"
 
// 또는 또 다른 async 함수에서 await으로
async function main() {
  const title = await getPostTitle(); // "클로저 완전정복"
  console.log(title);
}

// async/await ↔ Promise 완벽 대응
 
// Promise 체이닝 버전
function loadPost(id) {
  return fetchPost(id)
    .then((post) => fetchUser(post.authorId))
    .then((author) => ({ post, author }));
}
 
// async/await 버전 (완전히 동일한 동작)
async function loadPost(id) {
  const post = await fetchPost(id);
  const author = await fetchUser(post.authorId); // post.authorId 의존 → 순차 필요
  return { post, author };
}
 
// 둘 다 Promise를 반환하며 완전히 동일하게 동작
loadPost(1).then(({ post, author }) => console.log(post, author));

// ✅ 기본 에러 처리
async function loadPostDetail(postId) {
  try {
    const post = await fetchPost(postId);
    const comments = await fetchComments(postId);
    return { post, comments };
  } catch (err) {
    // 어느 await에서 에러가 나도 여기서 잡힘
    console.error("게시글 로드 실패:", err.message);
    throw err; // 필요하면 위로 다시 throw
  } finally {
    // 성공/실패 무관하게 항상 실행
    setLoading(false);
  }
}
 
// ❌ 흔한 실수 — async 함수를 .catch 없이 호출
loadPostDetail(1); // Promise가 reject돼도 아무도 안 잡음 → Unhandled Promise Rejection
 
// ✅ 호출 측에서도 에러 처리 필요
try {
  const data = await loadPostDetail(1);
  render(data);
} catch (err) {
  showError(err.message);
}

// 래퍼 유틸리티
async function to(promise) {
  try {
    const data = await promise;
    return [null, data]; // [에러, 데이터]
  } catch (err) {
    return [err, null];
  }
}
 
// 사용 — try/catch 없이 깔끔하게
async function loadPostDetail(postId) {
  const [postErr, post] = await to(fetchPost(postId));
  if (postErr) {
    console.error("게시글 조회 실패:", postErr);
    return null;
  }
 
  const [commentsErr, comments] = await to(fetchComments(postId));
  if (commentsErr) {
    // 댓글은 실패해도 게시글은 보여줄 수 있음
    console.warn("댓글 조회 실패, 빈 배열로 대체");
    return { post, comments: [] };
  }
 
  return { post, comments };
}

// ❌ 순진한 코드 — 직렬 실행 (총 3초+)
// 🐣 영철의 코드
async function loadDashboard(userId) {
  const posts = await fetchPosts(userId);    // 1초 대기
  const friends = await fetchFriends(userId); // 1초 대기 (posts와 무관한데도 기다림!)
  const notifications = await fetchNotifications(userId); // 1초 대기
  return { posts, friends, notifications };
}
 
// ✅ 병렬 실행 — Promise.all (총 ~1초)
// 🦁 영호의 리팩토링
async function loadDashboard(userId) {
  const [posts, friends, notifications] = await Promise.all([
    fetchPosts(userId),
    fetchFriends(userId),
    fetchNotifications(userId),
  ]);
  // 세 요청이 동시에 시작되어 가장 느린 요청 시간만큼만 대기
  return { posts, friends, notifications };
}
 
// ✅ 의존관계가 있을 때 — 부분적 병렬
async function loadPostWithRelated(postId) {
  const post = await fetchPost(postId); // post.authorId가 필요하므로 먼저
 
  // post 얻은 뒤, author와 comments는 서로 독립적 → 동시에
  const [author, comments] = await Promise.all([
    fetchUser(post.authorId),
    fetchComments(postId),
  ]);
 
  return { post, author, comments };
}

// 패턴 1: 루프 내 비동기 — for...of vs map
const postIds = [1, 2, 3, 4, 5];
 
// ❌ forEach + async — 동작 안 함 (forEach는 Promise 무시)
postIds.forEach(async (id) => {
  const post = await fetchPost(id); // await이 무의미
  console.log(post);
});
 
// ✅ for...of — 순차 처리 (앞 완료 후 다음 시작)
for (const id of postIds) {
  const post = await fetchPost(id);
  console.log(post);
}
 
// ✅ map + Promise.all — 병렬 처리 (모두 동시 시작)
const posts = await Promise.all(postIds.map((id) => fetchPost(id)));
 
// 패턴 2: 재시도 로직 (Retry)
async function fetchWithRetry(url, maxRetries = 3) {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      return await fetch(url).then((r) => r.json());
    } catch (err) {
      if (attempt === maxRetries) throw err;
      await new Promise((resolve) => setTimeout(resolve, attempt * 1000)); // 지수 백오프
    }
  }
}
 
// 패턴 3: 취소 가능한 비동기 (AbortController)
async function fetchPostCancellable(postId, signal) {
  const response = await fetch(`/api/posts/${postId}`, { signal });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}
 
// 사용
const controller = new AbortController();
const postPromise = fetchPostCancellable(1, controller.signal);
 
// 3초 후 취소
setTimeout(() => controller.abort(), 3000);
 
try {
  const post = await postPromise;
} catch (err) {
  if (err.name === "AbortError") console.log("요청 취소됨");
}

async function loadProfile(userId) {
  const posts = await fetchPosts(userId);       // 2초
  const followers = await fetchFollowers(userId); // 1초
  const following = await fetchFollowing(userId); // 1초
  return { posts, followers, following };
}

async function willFail() {
  throw new Error("실패!");
}
 
// willFail()이 반환하는 Promise는 reject됨
willFail()
  .then(() => console.log("성공")) // 실행 안 됨
  .catch((err) => console.error(err.message)); // "실패!" ✅
 
// async/await으로 잡기
try {
  await willFail();
} catch (err) {
  console.error(err.message); // "실패!" ✅
}