자바스크립트 비동기 이해하기 - (3.3) Promise Static 함수

2025.04.18 - [FE develop/Javascript] - 자바스크립트 비동기 이해하기 - (3.2) Promise를 더 알아보자

자바스크립트 비동기 이해하기 - (3.2) Promise를 더 알아보자

 

이전 포스트에서는 Promise의 기본 개념과 체이닝을 통한 비동기 처리 방법을 알아보았습니다. 이번에는 Promise의 정적(static) 메서드들을 살펴보며, 여러 개의 비동기 작업을 효과적으로 다루는 방법을 소개하겠습니다.

두 비동기 함수를 동시에 실행하고 싶을 때

function getName() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("철수");
            // reject(new Error("에러: 이름이 없어요"));
        }, 1000);
    });
}

function getTodo() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("밥먹기");
            // reject(new Error("에러: 할 일이 없어요"));
        }, 2000);
    });
}

 

이 코드에서 getName()은 1초 후에 이름을 반환하고, 그 이후 getTodo()는 2초 후에 할 일을 반환합니다. 이 두 작업은 서로 의존적이지 않기 때문에 굳이 순차적으로 실행할 필요가 없습니다. 동시에 실행하면 전체 실행 시간을 줄일 수 있습니다.

이런 상황에서 활용할 수 있는 것이 Promise의 정적 메서드들입니다.

---

1️⃣ Promise.all()

Promise.all()은 여러 개의 프로미스를 병렬로 실행하고, 모두 성공했을 때 결과를 배열로 반환합니다.

const promise = Promise.all([getName(), getTodo()]);

promise.then((data) => {
    console.log(data); // ["철수", "밥먹기"]
}).catch((error) => {
    console.log(error);
});

 

✅ 장점

• 모든 작업이 성공해야만 .then()으로 넘어갑니다.
• 배열에 넣은 순서대로 결과가 반환됩니다.

⚠️ 주의할 점

• 배열 중 하나라도 실패하면 .catch()로 넘어가며, 가장 먼저 실패한 프로미스의 에러가 전달됩니다.
• 한 프로미스라도 실패하면 나머지는 무시되고 실패 처리됩니다.

 

2️⃣ Promise.allSettled()

Promise.allSettled()은 Promise.all()과 유사하지만, 모든 프로미스가 settle(완료)될 때까지 기다립니다.
성공하든 실패하든 각 프로미스의 상태와 결과를 모두 확인할 수 있습니다.

 

Promise.allSettled([getName(), getTodo()])
    .then((results) => {
        console.log(results);
    });

// 예시 결과 (getName이 실패한 경우)
[
  { status: "rejected", reason: Error: 에러: 이름이 없어요 },
  { status: "fulfilled", value: "밥먹기" }
]

 

✅ 활용 예시

• 여러 개의 요청 중 실패 여부와 상관없이 결과를 모두 보고 싶을 때
• 성공과 실패를 개별적으로 처리해야 할 때

 

3️⃣ Promise.any()

Promise.any()는 전달된 프로미스 중 가장 먼저 성공한 결과만 반환합니다.

Promise.any([getName(), getTodo()])
    .then((data) => {
        console.log(data); // 가장 먼저 성공한 결과
    }).catch((error) => {
        console.log(error); // 모두 실패했을 때만 실행
    });

 

✅ 특징

• 가장 빠르게 성공한 하나의 값만 필요할 때 사용
• 배열 내 모든 프로미스가 실패한 경우에만 .catch()가 실행되며, AggregateError라는 객체가 전달됩니다.

 

4️⃣ Promise.race()

Promise.race()는 가장 먼저 settle(성공 또는 실패)된 프로미스의 결과를 반환합니다.

 

Promise.race([getName(), getTodo()])
    .then((data) => {
        console.log("가장 빨리 성공한 값:", data);
    }).catch((error) => {
        console.log("가장 빨리 실패한 에러:", error);
    });

 

✅ 활용 예시

• 여러 요청 중 가장 빠른 응답 하나만 필요할 때
• 타임아웃 처리 로직 등에 사용

 

 

정리

메서드                           설명                                                                                                       결과

Promise.all()	모두 성공 시 결과 배열 반환, 하나라도 실패 시 즉시 실패	[값1, 값2, ...]
Promise.allSettled()	성공/실패와 관계없이 모든 결과 확인 가능	[{status, value/reason}, ...]
Promise.any()	가장 먼저 성공한 프로미스 반환, 전부 실패하면 AggregateError 발생	값
Promise.race()	가장 먼저 완료된(성공/실패) 프로미스 결과 반환	값 또는 에러

---

이처럼 Promise의 정적 메서드를 활용하면, 여러 비동기 작업을 더욱 유연하고 효율적으로 처리할 수 있습니다. 상황에 따라 적절한 메서드를 선택해 활용해보세요!

다음 포스트에서는 async와 await를 활용하여 보다 직관적이고 간결한 비동기 코드 작성 방법을 알아보겠습니다.