Promise.all을 사용한 병렬 API 호출 최적화

문제 상황

대시보드 페이지에서 사용자 정보, 통계, 알림 데이터를 각각 다른 API에서 가져오는 로직이 있었다. 기존에는 순차적으로 호출하다보니 페이지 로딩이 3초 이상 걸렸다.

function loadDashboard() {
  return fetch('/api/user')
    .then(res => res.json())
    .then(user => {
      return fetch('/api/stats').then(res => res.json());
    })
    .then(stats => {
      return fetch('/api/notifications').then(res => res.json());
    });
}

해결 방법

각 API 호출이 서로 의존성이 없다는 점을 파악하고 Promise.all로 병렬 처리했다.

function loadDashboard() {
  return Promise.all([
    fetch('/api/user').then(res => res.json()),
    fetch('/api/stats').then(res => res.json()),
    fetch('/api/notifications').then(res => res.json())
  ]).then(([user, stats, notifications]) => {
    return { user, stats, notifications };
  });
}

결과

응답 시간이 약 1초로 단축되었다. 세 개의 API가 모두 1초 내외로 응답하는데, 순차 호출 시 3초가 걸리던 것이 병렬로 처리되면서 가장 느린 API 하나의 응답 시간만큼만 기다리면 되었다.

주의사항

Promise.all은 하나라도 reject되면 전체가 실패 처리된다. 일부 API 실패를 허용해야 한다면 각각 catch로 에러 핸들링을 하거나, Promise.allSettled를 고려해볼 수 있다. 다만 allSettled는 아직 Stage 3 제안 단계라 프로덕션에서는 신중하게 사용해야 한다.