[JavaScript] Promise Static(정적) 함수를 알아보자

흩날리는추억·2024년 3월 19일

❓ Promise Static(정적) 함수란?

JavaScript의 Promise 객체에는 여러 가지 정적(static) 함수가 있습니다. 이러한 함수들은 Promise 객체를 생성하거나 관리하는 데 사용됩니다. Promise에 대해 알아보자에서 공부했던 resolve와 reject도 정적 함수입니다. 이번 글에서는 resolve와 reject를 제외한 나머지 정적 함수에 대해 알아보겠습니다.

Promise.all(iterable)

Promise 객체의 반복 가능한(iterable) 모든 항목이 완료될 때까지 기다린 후, 해당 Promise들이 모두 완료된 후에 하나의 Promise를 반환합니다. 반환한 결과는 각 Promise의 결과값으로 이루어진 배열입니다. 결과값 배열의 순서는 입력된 Promise들의 순서와 동일합니다.

iterable은 Promise들의 배열 또는 반복 가능한(iterable) 객체입니다.

주의 사항
만약 입력된 Promise들 중 하나라도 거부(rejected)된 경우, 반환된 Promise는 해당 거부 이유와 함께 거부됩니다. 이때 다른 Promise들의 완료 여부와 관계없이 바로 거부가 됩니다.

사용 예시

const getBreakfast = () => {
  return new Promise((resolve, reject) => {
    // ...
  });
};

const getLunch = () => {
  return new Promise((resolve, reject) => {
    // ...
  });
};

const getDinner = () => {
  return new Promise((resolve, reject) => {
    // ...
  });
};

const promise = Promise.all(getBreakfast(), getDinner(), getLunch());
// ['견과류', '탄수화물', '단백질']

왜 필요할까?
Promise를 여러 개 사용할 때 순서에 상관없이 동시에 작업을 시작해야 하는 경우가 있습니다. 이때 then()과 Promise Chanining을 이용하여 사용한다면 시간적으로 낭비하는 일이 발생할 수 있습니다. 위의 그림과 같이 서로 연관이 없는 Promise 함수들을 사용한다면 하나씩 작업을 처리하여 마무리하는 작업 시간이 늘어납니다.
Promise.all를 사용한다면 아래의 그림과 같이 병렬적인 작업이 가능해 전체 작업 시간이 줄어들 수 있습니다.

Promise.allSettled(iterable)

Promise.allSettle는 여러 개의 Promise를 동시에 실행하고, 모든 Promise가 끝날 때까지 기다린 후 하나의 Promise를 반환합니다. Promise.all하고 다른점은 Promise들 중 거부(rejected)가 있어도 모든 Promise가 완료될 때까지 기다리고, 모든 Promise의 결과(성공 또는 실패)에 대한 정보를 포함하는 Promise를 객체의 배열로 반환합니다.

사용 예시
// Promise.all과 다르게 배열 안에 Promise를 넣어서 사용
const promise = Promise.allSettled([getBreakfast(), getDinner(), getLunch()]);
status Promise가 성공했는지 또는 실패했는지 표현

value 성공한 Promise의 결과 값

reason 실패한 Promise의 거부(reason) 이유

각각의 Promise의 성공 여부와 더불어 세세한 내용을 알고 싶다면 Promise.all보다 Promise.allSettled를 사용하는 것이 바람직합니다.

Promise.any(iterable)

Promise.any 또한 여러 개의 Promise를 동시에 실행합니다. 하지만 위에서 배운 다른 정적 함수들과는 달리 동시에 실행된 Promise 중에 제일 먼저 resolve된 Promise의 값을 반환합니다. 만약 모든 Promise가 reject될 경우 error 메시지를 반환합니다.

사용 예시

const promise = Promise.any([getBreakfast(), getDinner(), getLunch()]);

promise
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error); // AggregateError: All promises were rejected
  }); ```

Promise.race(iterable)

Promise.race는 Promise.any와 비슷하지만 결과에 대해 다릅니다. Promise.race는 Promise를 동시에 실행하고 resolve와 reject에 상관없이 제일 먼저 작업을 완료한 Promise의 결과를 반환합니다.

사용 예시

const promise = Promise.race([getBreakfast(), getDinner(), getLunch()]);

promise
  .then((data) => {
    console.log(data); // 가장 빨리 끝난 Promise가 성공시
  })
  .catch((error) => {
    console.log(error); // 가장 빨리 끝난 Promise가 실패시
  }); ```