본문 바로가기

Ecmascript/Javascript

[비동기 병렬 처리]Promise의 메서드

Promise.all(배열)

  • 매개변수 배열에 담긴 Promise들이 병렬로 모두 실행이 끝날때까지 기다리고 모두 성공한 경우 처리를 실행
  • then의 매개변수에는 Promise들에서 전달된 결과값이 배열로 들어옴
const promise1 = new Promise((resolve, reject) => resolve('즉시 호출'));
// Promise 내부에 setTimeout이 있으므로 그 시간만큼 기다림
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('3초 뒤 호출'), 3000);
});

Promise.all([promise1, promise2])
.then(values => console.log(values)) // [ '즉시 호출', '3초 뒤 호출' ]

Promise.allSetteled(배열)

  • Promise.all은 프라미스가 하나라도 거절되면 전체를 거절하지만 Promise.allSettled는 모든 프라미스가 처리될 때까지 대기
  • 최근 추가 스펙이며, 코드를 병렬적으로 실행시킬때, 성공, 실패 여부를 구분하여 코드를 계속 진행해야 할때 유용
  • return 하는 객체
    • 성공: – {status:"fulfilled", value:result}
    • 에러: – {status:"rejected", reason:error}
Promise.allSettled([promiseFn1, promiseFn2])
  .then(results => {
    results.forEach((result, num) => {
      if (result.status == "fulfilled") { // 성공
        console.log(result.value);
      }
      if (result.status == "rejected") { // 에러
        console.log(result.reason);
      }
    });
  });
  • Polyfill
if(!Promise.allSettled) {
  Promise.allSettled = function(promises) {
    return Promise.all(promises.map(p => Promise.resolve(p).then(value => ({
      state: 'fulfilled',
      value
    }), reason => ({
      state: 'rejected',
      reason
    }))));
  };
}

Promise.race()

  • 경주를 하듯이 가장 먼저 resolve된 하나의 Promise가 return 된다.
  • 어떤 Promise가 종료되는지에 따라 then에 받는 결과가 달라진다.(API 통신의 경우 네트워크 상태에 따라 결과가 바뀔수 있다는 것)
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve(2000), 2000);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('즉시'), 0);
});

Promise.race([promise1, promise2])
.then(value => console.log(value)) // 즉시