Promise.all vs Promise.allSettled vs Promise.race vs Promise.any

프롤로그

본 글에서는 Promise의 method의 성공 및 에러 시 반환 값을 도표 형태로 정리하고자 합니다.

Promise에 대한 개념은 ko.javascript.info와 mdn docs을 살펴보시면 좋을 것 같습니다.

---

도표로 정리해 본 Promise method

	Promise.all()	Promise.allSettled()	Promise.race()	Promise.any()
반환 값	fulfilled 된 iterable	성공 실패가 반영 된 iterable *	가장 처음으로 fullfiled 또는 rejected 된 Promise	가장 처음으로 fullfiled 된 Promise
catch문 이동 하는 경우	Promise가 하나라도 reject되는 경우	-	-	모든 Promise가 rejected된 경우
catch문 이동 시 error 값	처음으로 Reject되는 Promise의 reason 값	-	-	"AggregateError: All promises were rejected"

*: 성공 시 : { status: "fulfilled", value: value}, 실패 시 : { status: "rejected", reason: reason}

---

연습 문제

1번)

const example = async () => {
  let value, reason;

  try{
    value = await Promise.all([
      new Promise((res, rej) => setTimeout(() => { res(1); }, 0)),
      new Promise((res, rej) => setTimeout(() => { res(2); }, 0)),
      new Promise((res, rej) => setTimeout(() => { rej(3); }, 0))
    ])
  } catch(error){
    reason = error;
  }

  console.log(value, reason);
}

example();

2번)

const example = async () => {
  let value, reason;

  try{
    value = await Promise.allSettled([
      new Promise((res, rej) => setTimeout(() => { res(1); }, 0)),
      new Promise((res, rej) => setTimeout(() => { res(2); }, 0)),
      new Promise((res, rej) => setTimeout(() => { rej(3); }, 0))
    ])
  } catch(error){
    reason = error;
  }

  console.log(value, reason);
}

3번)

const example = async () => {
  let value, reason;

  try{
    value = await Promise.race([
      new Promise((res, rej) => setTimeout(() => { res(1); }, 200)),
      new Promise((res, rej) => setTimeout(() => { res(2); }, 100)),
      new Promise((res, rej) => setTimeout(() => { rej(3); }, 300))
    ])
  } catch(error){
    reason = error;
  }

  console.log(value, reason);
}

4번)

const example = async () => {
  let value, reason;

  try{
    value = await Promise.any([
      new Promise((res, rej) => setTimeout(() => { rej(3); }))
    ])
  } catch(error){
    reason = error;
  }

  console.log(value, reason);
}

 

정답)

1. undefined, 3
2. [
   {status: "fulfilled", value: 1}, 
   {status: "fulfilled", value: 2}, 
   {status: "rejected", reason: 3}
   ],
   undefined
3. 2, undefined
4. undefined, AggregateError: All promises were rejected