[JS] Promise.all 과 Promise.allSettled 차이

JavaScript의 비동기 처리를 할 때, 여러 Promise를 동시에 처리해야 하는 경우가 많습니다. 이때 자주 사용하는 두 가지 메서드가 Promise.all과 Promise.allSettled입니다.

목차

1. Promise.all

2. Promise.allSettled

3. Promise.all vs Promise.allSettled

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. Promise.all

특징

 

• Promise.all은 주어진 모든 Promise가 성공적으로 이행(fulfilled) 되었을 때 하나의 Promise로 반환합니다.
• 만약 하나의 Promise라도 거부(rejected) 되면, 즉시 전체가 거부됩니다.
• 완전 성공이 요구되는 작업에서 사용됩니다.

const p1 = axios.get("서버주소/데이터1");
const p2 = axios.get("서버주소/데이터2");
const p3 = axios.get("서버주소/데이터3"); // rejected라고 가정

Promise.all([p1, p2, p3])
  .then(results => console.log(results)) // 실행되지 않음
  .catch(error => console.log(error)); // 에러 메시지 출력

 

 

위 예시는 각 서버주소/데이터{id} 에 데이터를 요청하고 받아오는 코드입니다.

만약 우리가 서버에서 데이터를 받아와서 화면에 보여준다고 생각해 봅시다. 모든 데이터가 성공적으로  이행(fulfilled) 되면 화면이 정상적으로 보여지겠죠? 하지만 만약 하나의 Promise라도 거부(rejected) 되면, 모든 데이터가 거부되어 빈 화면이 노출될 것입니다. 매우 비효율적이겠죠?

장점

• 모든 작업의 성공이 필수적일 때 결과를 신뢰할 수 있습니다.

단점

• 하나라도 실패하면 전체를 실패로 간주해 모든 작업의 성공이 필수가 아닌 경우 비효율적입니다.

2. Promise.allSettled

특징

 

• Promise.allSettled은 모든 Promise가 "정착(settled)"되기를 기다립니다. (이행 또는 거부)
• 모든 Promise의 결과와 상태를 객체 형태로 반환합니다.
• 성공과 실패를 동시에 처리해야 하는 작업에서 유용합니다.

const p1 = axios.get("서버주소/데이터1");
const p2 = axios.get("서버주소/데이터2");
const p3 = axios.get("서버주소/데이터3");

Promise.allSettled([p1, p2, p3])
  .then(results => console.log(results))
  .catch(error => console.log(error));

 

[
  { status: "fulfilled", value: "데이터1" },
  { status: "rejected", reason: "에러 발생" },
  { status: "fulfilled", value: "데이터3" }
]

 

위 예시에서도 동일하게 서버에서 데이터를 받아와서 화면에 보여준다고 생각해 봅시다. Promise.allSettled는 Promise.all과 다르게 데이터가 성공적으로 이행(fulfilled) 되었는지, 거부(rejected) 되었는지 상태를 배열로 반환합니다.

 

장점

• Promise가 거부되더라도 모든 결과를 확인할 수 있어 유연한 에러 처리가 가능합니다.

단점

• 성공 여부와 관계없이 모든 Promise가 종료될 때 까지 대기해야 합니다.
• 모든 작업의 성공이 필수인 경우 비효율적입니다.

3. Promise.all vs Promise.allSettled

사용 사례

• Promise.all
  • API 호출 결과가 모두 필요한 경우
  • 예) 사용자의 데이터와 권한 정보를 동시에 받아와야 하는 경우
• Promise.allSettled
  • 실패한 작업을 무시하고 가능한 많은 결과를 수집해야 하는 경우
  • 예) 여러 파일을 다운로드하는 작업 중 일부 실패를 허용

주요 차이점

특성	Promise.all	Promise.allSettled
실패 처리 방식	하나라도 실패하면 즉시 거부	모든 Promise 결과를 반환
성공 조건	모든 Promise가 성공해야 완료	실패한 Promise도 포함하여 처리 가능
사용 사례	모든 작업의 성공이 필수적일 때	작업의 결과를 모두 확인해야 할 때

 

 

 

결론

• Promise.all: "모두 성공해야 한다"는 조건이 있을 때 적합하다.
• Promise.allSettled: "실패하더라도 결과를 모두 확인해야 한다"는 조건이 있을 때 적합하다.

 

 

추천글

[JS] JavaScript의 클로저란?

 

[JS] Throttle과 Debounce