⏳ 05. 비동기 & Promise — 콜백 지옥에서 탈출하는 완벽한 지도

// ❌ 순진한 코드 (Naive Approach) — 콜백 지옥
// 🐣 영철의 초기 코드
 
function loadPostDetail(postId) {
  fetchPost(postId, function (err, post) {
    if (err) {
      console.error("게시글 조회 실패:", err);
      return;
    }
 
    fetchUser(post.authorId, function (err, author) {
      if (err) {
        console.error("작성자 조회 실패:", err);
        return;
      }
 
      fetchComments(postId, function (err, comments) {
        if (err) {
          console.error("댓글 조회 실패:", err);
          return;
        }
 
        // 드디어 데이터 사용 가능
        renderPostDetail({ post, author, comments });
        // 들여쓰기 4단계... 더 깊어지면?
      });
    });
  });
}

// Promise 생성 (내부 로직 담당자)
function fetchPost(postId) {
  return new Promise((resolve, reject) => {
    // 비동기 작업 시작
    setTimeout(() => {
      if (postId > 0) {
        resolve({ id: postId, title: "클로저 완전정복", authorId: 42 });
        // resolve 호출 → Fulfilled 상태, .then()으로 전달
      } else {
        reject(new Error("유효하지 않은 postId"));
        // reject 호출 → Rejected 상태, .catch()로 전달
      }
    }, 1000);
  });
}
 
// Promise 소비 (결과 사용)
fetchPost(1)
  .then((post) => {
    console.log("게시글:", post.title); // "게시글: 클로저 완전정복"
    return post;
  })
  .catch((err) => {
    console.error("에러:", err.message);
  });

// ✅ 우아한 코드 (Pro Approach) — Promise 체이닝
// 🦁 영호의 리팩토링
 
function loadPostDetail(postId) {
  return fetchPost(postId)
    .then((post) => {
      // post를 받고, author 조회 → Promise 반환
      return fetchUser(post.authorId).then((author) => ({ post, author }));
    })
    .then(({ post, author }) => {
      // author까지 받고, 댓글 조회
      return fetchComments(postId).then((comments) => ({
        post,
        author,
        comments,
      }));
    })
    .then(({ post, author, comments }) => {
      // 모든 데이터 준비 완료
      renderPostDetail({ post, author, comments });
    })
    .catch((err) => {
      // 어느 단계에서 에러가 나도 여기 하나에서 처리
      console.error("게시글 상세 로드 실패:", err.message);
      showErrorUI();
    });
}

fetchPost(1)
  .then((post) => {
    throw new Error("의도적 에러"); // .then 안에서 throw해도 .catch로 이동
    return post;
  })
  .then((post) => {
    // 앞에서 에러가 났으므로 이 .then은 건너뜀
    console.log("이건 실행 안 됨");
  })
  .catch((err) => {
    // 체인의 어느 지점에서 에러가 나도 여기서 처리
    console.error("에러 캐치:", err.message);
    // catch에서 값을 반환하면 에러 복구 — 이후 .then이 정상 실행됨
    return { title: "기본 게시글" };
  })
  .then((post) => {
    // catch가 에러를 복구했으므로 여기 실행됨
    console.log("복구된 게시글:", post.title);
  })
  .finally(() => {
    // 성공/실패 무관하게 항상 실행 (로딩 스피너 숨기기 등)
    hideLoadingSpinner();
  });

// 영수네 커뮤니티 — 게시글 상세 + 작성자 + 댓글을 동시에 조회
 
async function loadPostDetail(postId) {
  const [post, comments, relatedPosts] = await Promise.all([
    fetchPost(postId),           // 병렬 시작
    fetchComments(postId),       // 병렬 시작
    fetchRelatedPosts(postId),   // 병렬 시작
  ]);
  // 세 요청이 모두 완료된 후에 실행
  return { post, comments, relatedPosts };
}
 
// 하나라도 reject되면 전체가 reject! (단점)
// 게시글 조회 성공, 댓글 조회 실패 → loadPostDetail 전체 실패

// 대시보드 — 일부 위젯이 실패해도 나머지는 보여줘야 할 때
 
const results = await Promise.allSettled([
  fetchPostCount(),     // 성공
  fetchUserCount(),     // 서버 오류로 실패
  fetchCommentCount(),  // 성공
]);
 
results.forEach((result) => {
  if (result.status === "fulfilled") {
    console.log("성공:", result.value);
  } else {
    console.error("실패:", result.reason);
    // 실패한 것만 기본값으로 대체
  }
});
// 게시글 수와 댓글 수는 정상 표시, 유저 수만 "--"로 표시

// 타임아웃 구현 — 3초 안에 응답 없으면 에러 처리
 
function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error(`${ms}ms 타임아웃`)), ms)
  );
  return Promise.race([promise, timeout]);
}
 
try {
  const post = await withTimeout(fetchPost(1), 3000);
  renderPost(post);
} catch (err) {
  if (err.message.includes("타임아웃")) {
    showTimeoutMessage();
  }
}

// 여러 CDN 중 가장 빠른 곳에서 리소스 로드
 
const image = await Promise.any([
  loadFrom("cdn1.youngsu.com/logo.png"),
  loadFrom("cdn2.youngsu.com/logo.png"),
  loadFrom("cdn3.youngsu.com/logo.png"),
]);
// 첫 번째로 성공한 CDN의 이미지 사용
// 전부 실패하면 AggregateError 발생

console.log("1");
 
Promise.resolve("2").then((val) => {
  console.log(val);
});
 
console.log("3");

// 🐣 영철이의 코드 — 이전 요청이 완료되기 전에 새 요청이 날아가는 문제
window.addEventListener("scroll", async () => {
  const posts = await fetchMorePosts(currentPage++);
  appendPosts(posts);
});

// ✅ 리팩토링 — 로딩 중 중복 요청 방지
let isLoading = false;
 
window.addEventListener("scroll", async () => {
  if (isLoading) return; // 이미 로딩 중이면 무시
 
  isLoading = true;
  try {
    const posts = await fetchMorePosts(currentPage++);
    appendPosts(posts);
  } finally {
    isLoading = false; // 성공/실패 무관하게 플래그 해제
  }
});
 
// ✅ 더 고급: AbortController로 이전 요청 취소
let controller = null;
 
window.addEventListener("scroll", async () => {
  if (controller) controller.abort(); // 이전 요청 취소
  controller = new AbortController();
 
  try {
    const posts = await fetchMorePosts(currentPage++, controller.signal);
    appendPosts(posts);
  } catch (err) {
    if (err.name === "AbortError") return; // 취소는 에러 아님
    console.error(err);
  }
});