[JavaScript] Promise 메서드 사용하기 (ft. all/allSettled/race)

Promise 메서드에 대해 알아보기 전에 만약 Promise를 모른다면 아래 링크를 통해 대략적으로 이해하고 오자.

[ES6+] Promise란? - 비동기 처리를 위한 객체

[ES6+] Promise란? - 비동기 처리를 위한 객체

 

Promise 자체에서 제공하는 메서드에 대해 알아볼 건데, 전체적으로 알아보면 내용이 길어지니 알아두면 좋을 메서드에 대해서만 알아보고자 한다.

---

1. Promise.all

Promise.all은 매개변수로 주어진 배열의 모든 Promise가 이행된후 .then을 실행한다.

모든 Promise가 이행된다 하였는데, 이는 하나라도 실패(reject)된다면 그냥 에러가 발생하여 catch로 잡아줘야 한다.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // expected output: Array [3, 42, "foo"]
});

2. Promise.allSettled

Promise.allSettled는 주어진 모든 프로미스를 이행하거나 거부한 후, 각 프로미스에 대한 결과를 나타내는 객체 배열을 반환한다. 즉, Promise.all과 달리 실패를 하더라도 then을 통해 실행된다는 의미이다.

그렇기 때문에 Promise.all의 경우 하나라도 실패하면 전부 다시 실행해야 하지만, allSettled의 경우 실패한 것들만 골라서 다시 실행시킬 수 있을 것이다.(물론 상황에 따라서 Promise.all과 Promise.allSettled를 골라 사용하는 게 좋을 듯하다.)

Promise.allSettled([
  Promise.resolve(33),
  new Promise(resolve => setTimeout(() => resolve(66), 0)),
  99,
  Promise.reject(new Error('an error'))
])
.then(values => console.log(values));

// [
//   {status: "fulfilled", value: 33},
//   {status: "fulfilled", value: 66},
//   {status: "fulfilled", value: 99},
//   {status: "rejected",  reason: Error: an error}
// ]

* Promise.allSettled와 Promise.all의 차이점에 대해 대략적으로 설명을 해뒀는데, 실제로 확인을 하고자 한다면, 그냥 Promise.allSettled 예제 코드를 가지고 돌려보면 된다. (allSettled를 all로 바꾸어서 말이다.)

3. Promise.race

Promise.race는 매개변수로 주어진 배열중에 가장 먼저 실행이 완료된 것(가장 빠른 것)만 then으로 받고 끝이 난다.

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value); // expected output: "two"
  // Both resolve, but promise2 is faster
});

---

* 이 외에도 다양한 메서드들이 존재하는데, MDN 사이트를 통해 뭐가 있는지 살펴보자.

---

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise#%EC%A0%95%EC%A0%81_%EB%A9%94%EC%84%9C%EB%93%9C

Promise - JavaScript | MDN