Promise.allSettled?

😆 이번시간에는 promise.all과 유사한 promise.allSettled에 대해 알아보았다!

1. Promise.allSettled의 필요성

• 여러 프로미스 객체를 병렬적으로 진행할 때, 우리는 Promise.all을 사용할 수 있다.

const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(4);

Promise.all([promise1, promise2]).then(() => {
  console.log('success');
});

// success

• 단 Promise.all의 경우, 하나의 프로미스라도 실패하면 에러로 처리된다.

const promise1 = Promise.resolve(3);  
const promise2 = Promise.reject(4);   // 거부

Promise.all([promise1, promise2])
  .then(() => console.log('success'))
  .catch(() => console.log('error'));

// error

• 만약, 모든 프로미스를 병렬적으로 처리하되, 실패 여부와 상관없이 이행하고 싶다면 어떻게 해야할까?
• 이 경우에 Promise.allSettled를 사용하면 된다.

2. Promise.allSettled이란?

• Promise.allSettled는 여러 프로미스를 병렬적으로 처리하되, 하나의 프로미스가 실패해도 무조건 이행한다.
• 아래 예시를 보면 promise2는 실패하는 프로미스지만, 결과적으로 catch로 넘어가지 않는 걸 볼 수 있다.

const promise1 = Promise.resolve(3);        // 성공
const promise2 = Promise.reject('error');   // 실패

Promise.allSettled([promise1, promise2])
  .then(() => console.log('success'))
  .catch(() => console.log('error'));

// success

• 또한, 모든 프로미스가 실패해도 catch로 넘어가지 않는다.

const promise1 = Promise.reject('error');   // 실패
const promise2 = Promise.reject('error');   // 실패

Promise.allSettled([promise1, promise2])
  .then(() => console.log('success'))
  .catch(() => console.log('error'));

// success

❓ 그럼 Promise.all을 다 Promise.allSettled로 바꿔도 될까?

• 잠깐! Promise.allSettled는 결과값 형태가 Promise.all과 다르다.
• 먼저 Promise.all의 경우, 결과값이 array형태로 출력된다.

const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(4);

Promise.all([promise1, promise2])
  .then((data) => console.log(data));

// [3, 4]

• 하지만, Promise.allSettled는 결과값이 array object형태로 출력된다.

const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(4);

Promise.allSettled([promise1, promise2])
  .then((data) => console.log(data));

// [ {status:"fulfilled", value:3}, {status:"fulfilled", value:4} ]

• 만약 Promise.all과 같은 형태의 데이터를 얻으려면 추가 가공(filter, map)이 필요하다.

const promise1 = Promise.resolve(3);
const promise2 = Promise.resolve(4);

Promise.allSettled([promise1, promise2]).then((result) => {
  const fulfilled = result.filter(data => data.status === 'fulfilled').map(data => data.value);
  console.log(fulfilled);
});