여러 개의 Promise 객체를 다뤄야 할 때 사용되는 Promise의 메소드

all 메소드

 

// 1번 멤버 정보
const p1 = fetch('https://test.com/api/members/1').then((res) => res.json());
// 2번 멤버 정보
const p2 = fetch('https://test.com/api/members/2').then((res) => res.json());
// 3번 멤버 정보
const p3 = fetch('https://test.com/api/members/3').then((res) => res.json());

Promise
  .all([p1, p2, p3])
  .then((results) => {
    console.log(results); // Array : [1번 멤버 정보, 2번 멤버 정보, 3번 멤버 정보]
  });

all 메소드도 then 메소드처럼 새로운 Promise 객체를 리턴합니다.

all 메소드는 이렇게 아규먼트로 들어온 배열 안에 있는 모든 Promise 객체가 pending 상태에서 fulfilled 상태가 될 때까지 기다립니다. 그리고 모든 Promise 객체들이 fulfilled 상태가 되면, all 메소드가 리턴했던 Promise 객체는 fulfilled 상태가 되고, 각 Promise 객체의 작업 성공 결과들로 이루어진 배열을, 그 작업 성공 결과로 갖게 됩니다.

 

이렇게 all 메소드가 리턴한 Promise 객체는,

각 개별 Promise 객체의 작업 성공 결과로 이루어진 배열을 자신의 작업 성공 결과로 갖는다는 것을 알 수 있습니다.

이렇게 all 메소드는 여러 Promise 객체의 작업 성공 결과를 기다렸다가 모두 한 번에 취합하기 위해서 사용합니다.

 

만일 fetch 함수에서 문제가 발생해서 p3가 rejected 상태가 되면, 

all 메소드가 리턴한 Promise 객체는 p3 객체처럼 rejected 상태가 되고 동일한 작업 실패 정보를 갖게 됩니다. 

이렇게 all 메소드는 하나의 Promise 객체라도 rejected 상태가 되면, 전체 작업이 실패한 것으로 간주해야 할 때 사용합니다. 

 

 

 

race 메소드

race 메소드도 all 메소드와 마찬가지로 여러 Promise 객체들이 있는 배열을 아규먼트로 받습니다.

그리고 race 메소드도 all 메소드처럼 Promise 객체를 리턴하지만 그 적용 원리가 다릅니다.

race 메소드가 리턴한 Promise 객체는 아규먼트로 들어온 배열의 여러 Promise 객체들 중에서

가장 먼저 fulfilled 상태 또는 rejected 상태가 된 Promise 객체와 동일한 상태와 결과를 갖게 됩니다.

 

 

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Success'), 1000);
});
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('fail')), 2000);
});
const p3 = new Promise((resolve, reject) => {
  setTimeout(() => reject(new Error('fail2')), 4000);
});

Promise
  .race([p1, p2, p3])
  .then((result) => {
    console.log(result); // hello 출력
  })
  .catch((value) => {
    console.log(value);
  });

p1 객체는 1초 후에 fulfilled 상태가 되고, 그 작업 성공 결과로 문자열 Success를 가지게 됩니다.

p2는 2초 후에, p3는 4초 후에 rejected 상태가 됩니다.

race 메소드가 리턴한 Promise 객체는 이 중에서 가장 빨리 상태 정보가 결정된 p1 객체와 동일한 상태와 결과를 가집니다.

말그대로 race 메소드는 여러 Promise 객체들을 경쟁시켜서 가장 빨리 상태가 결정된 Promise 객체를 선택하는 메소드입니다

 

 

 

 

allSettled 메소드

각 메소드가 리턴한 Promise 객체가 A라고 할 때
배열 내의 모든 Promise 객체가 fulfilled 또는 rejected 상태가 되기까지 기다리고,

pending 상태의 Promise 객체가 하나도 없게 되면, A의 상태값은 fulfilled 상태가 되고 그 작업 성공 결과로, 하나의 배열을 갖게 됩니다. 이 배열에는 아규먼트로 받았던 배열 내의 각 promise 객체의

(1) 최종 상태를 status 프로퍼티,

(2) 그 작업 성공 결과는 value 프로퍼티,

(3) 그 작업 실패 정보는 reason 프로퍼티 에 담은 객체들이 요소로 존재합니다.

[
   {status: "fulfilled", value: 1},
   {status: "fulfilled", value: 2},
   {status: "fulfilled", value: 3},
   {status: "rejected",  reason: Error: an error}
]

 

참고로 fulfilled 상태와 rejected 상태를 묶어서 settled 상태라고 합니다.

allSettled 메소드는 말 그대로 배열 속 Promise 객체들이 settled 상태가 되기만 하면 되는 겁니다.

이에 반해 위에서 배운 all 메소드는 모든 Promise 객체들이 fulfilled 상태가 되어야합니다.

 

 

any 메소드

각 메소드가 리턴한 Promise 객체가 A라고 할 때

여러 Promise 객체들 중에서 가장 먼저 fulfilled 상태가 된 Promise 객체의 상태와 결과가 A에도 똑같이 반영됩니다.

만약 모든 Promise 객체가 rejected 상태가 되어버리면 AggregateError라고 하는 에러를 작업 실패 정보로 갖고 rejected 상태가 됩니다. any라는 단어의 뜻처럼 배열 속의 Promise 객체 중 단 하나라도 fulfilled 상태가 되면 되는 겁니다.