Promise.all과 Promise.race를 활용한 API 호출 최적화

문제 상황

대시보드 페이지에서 사용자 정보, 통계 데이터, 최근 활동 내역을 각각 다른 API에서 가져와야 했다. 기존에는 순차적으로 호출하다 보니 총 로딩 시간이 2초를 넘어갔다.

const userData = await fetchUser();
const statsData = await fetchStats();
const activityData = await fetchActivity();

Promise.all로 병렬 처리

세 API가 서로 의존성이 없다는 점을 파악하고 Promise.all로 병렬 호출하도록 변경했다.

const [userData, statsData, activityData] = await Promise.all([
  fetchUser(),
  fetchStats(),
  fetchActivity()
]);

로딩 시간이 가장 느린 API 기준으로 단축되어 약 800ms로 개선됐다.

Promise.race 활용 사례

타임아웃 처리가 필요한 케이스에서 Promise.race를 활용했다.

const timeoutPromise = new Promise((_, reject) => 
  setTimeout(() => reject(new Error('Timeout')), 5000)
);

const result = await Promise.race([
  fetchData(),
  timeoutPromise
]);

주의사항

Promise.all은 하나라도 reject되면 전체가 실패한다. 일부 API 실패를 허용해야 한다면 Promise.allSettled를 검토해볼 만하지만, 아직 Stage 3 제안 단계라 프로덕션에선 보류했다. 당분간은 try-catch로 개별 에러 처리하는 방식을 유지하기로 했다.