🚀 Angular에서 여러 비동기 요청 한 번에 처리하기: Promise.all

Angular 개발을 하다 보면 여러 개의 API를 호출하고, 그 결과가 모두 도착했을 때 특정 로직을 실행해야 하는 경우가 많습니다.

 

이때 하나씩 await를 걸면 전체 시간이 길어지지만, Promise.all을 사용하면 병렬로 처리하여 성능을 최적화할 수 있습니다.

1. Promise.all이란?

Promise.all은 여러 개의 Promise들을 배열로 받아서, 모든 Promise가 성공(resolve)할 때까지 기다렸다가 그 결과들을 배열로 반환합니다.

• 장점: 비동기 작업이 병렬로 진행되어 전체 실행 시간이 단축됩니다.
• 특징: 전달받은 Promise 중 하나라도 실패(reject)하면, 전체가 즉시 실패로 간주됩니다.

---

2. 기본적인 사용법 (TypeScript 기반)

Angular 서비스나 컴포넌트 내에서 여러 데이터를 불러오는 예시입니다.

async getAllData() {
  try {
    // 1. 여러 비동기 작업을 배열로 준비 (호출 즉시 실행 시작)
    const promise1 = this.http.get('url1').toPromise();
    const promise2 = this.http.get('url2').toPromise();
    const promise3 = this.http.get('url3').toPromise();

    // 2. 모든 결과가 돌아올 때까지 기다림
    const [res1, res2, res3] = await Promise.all([promise1, promise2, promise3]);

    console.log('모든 데이터 로드 완료:', res1, res2, res3);
  } catch (error) {
    console.error('하나 이상의 요청이 실패했습니다.', error);
  }
}

---

3. 실제 활용 예시: 사용자 프로필과 게시물 동시 조회

사용자 정보와 그 사용자의 게시물 목록을 동시에 가져와야 하는 상황을 가정해 보겠습니다.

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({ ... })
export class UserComponent implements OnInit {
  userData: any;
  userPosts: any[];
  isLoading = true;

  constructor(private dataService: DataService) {}

  async ngOnInit() {
    try {
      // 병렬 요청 실행
      const [user, posts] = await Promise.all([
        this.dataService.getUser(1).toPromise(),
        this.dataService.getPosts(1).toPromise()
      ]);

      this.userData = user;
      this.userPosts = posts;
    } catch (err) {
      alert('데이터를 불러오는데 실패했습니다.');
    } finally {
      this.isLoading = false;
    }
  }
}

---

4. 주의사항 및 팁

1. Observable vs Promise: Angular의 HttpClient는 기본적으로 Observable을 반환합니다. Promise.all을 쓰려면 위 예시처럼 .toPromise()(RxJS 7 미만)나 lastValueFrom()(RxJS 7 이상 권장)을 사용해 변환해야 합니다.
2. 개별 에러 처리: 만약 하나가 실패해도 나머지는 성공하길 원한다면, 각 Promise에 미리 .catch()를 붙이거나 Promise.allSettled()를 사용하는 것이 좋습니다.
3. 순서 보장: Promise.all에 넣은 배열의 순서와 결과값 배열의 순서는 정확히 일치합니다.

---

💡 정리하며

Angular에서 API 성능을 높이고 싶다면 await를 남발하기보다 Promise.all을 적극 활용해 보세요.

 

코드도 간결해지고 사용자 경험(UX)도 훨씬 쾌적해집니다!