여러 개의 Promise 객체를 다루는 메소드

채무·2024년 1월 31일

Web

목록 보기

8/11

all 메소드

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

// 1번 직원 정보
const p1 = fetch('https://learn.codeit.kr/api/members/1').then((res) => res.json());
// 2번 직원 정보
const p2 = fetch('https://learn.codeit.kr/api/members/2').then((res) => res.json());
// 3번 직원 정보
const p3 = fetch('https://learn.codeit.kr/api/members/3').then((res) => res.json());

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

all 메소드는 argument로 들어온 배열 안의 모든 Promise 객체가 pending 상태에서 fulfilled 상태가 될 때가지 기다린다
이후 각 Promise 객체의 작업 성공 결과들로 이루어진 배열을 결과로 갖게 된다
배열의 요소 중 하나라도 rejected 상태가 되면, all 메소드가 리턴한 Promise 객체는 rejected 상태가 되고, 작업 실패 정보를 갖게 된다
요소의 rejected 상태를 대비하기 위해서는 catch 메소드를 사용하면 된다

race 메소드

race 메소드는 argument로 받은 배열의 여러 Promise 객체들을 경쟁(race)시켜서 가장 빨리 상태가 결정(fulfilled or 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);
  });

race 메소드는 argument로 들어온 배열의 Promise 객체들 중에서 가장 먼저 fulfilled 또는 rejected 상태가 된 Promise 객체와 동일한 상태와 결과를 갖게 된다
위의 코드에서 p1이 가장 빨린 fulfilled가 되므로, race 메소드가 리턴한 Promise 객체는 p1 객체와 동일한 상태과 결과를 가진다