Promise API

Promise를 잘 다루는 방법 중 하나는 매서드를 사용하는 것 입니다.
5가지 주요 매서드를 정리해봅시다.

1. Promise.all

여러 개의 Promise를 동시에 처리하고, 모든 Promise가 이행되거나 한 개의 Promise가 거부될 때까지 기다리는 기능을 제공

• .all 메서드는 Promise들로 이루어진 배열을 인자로 받습니다.
• 모든 Promise가 이행되면 최종적으로 배열을 반환
• 하지만 하나의 Promise라도 실패하면 첫 번째 거부된 Promise의 결과를 반환하며 나머지 Promise들은 무시
• 병렬 처리에 유용

const promise1 = fetchDataFromServer1();
const promise2 = fetchDataFromServer2();
const promise3 = fetchDataFromServer3();

Promise.all([promise1, promise2, promise3])
  .then(results => {
    // 세 개의 비동기 작업이 모두 성공적으로 이행된 경우
    console.log('결과 배열:', results);
    // results 배열에는 promise1, promise2, promise3의 결과가 순서대로 들어있음
  })
  .catch(error => {
    // 하나라도 거부된 Promise가 있는 경우
    console.error('에러:', error);
    // 첫 번째로 거부된 Promise의 에러 정보 출력
  });

2. Promise.allSettled

⚠️스펙에 추가된 지 얼마 안 된 문법입니다. 구식 브라우저는 폴리필이 필요합니다.

위에서 배운 .all은 하나라도 실패하면 전체가 거절됩니다.

반면, Promise.allSettled는 모든 프라미스가 처리될 때까지 기다립니다. 반환되는 배열은 다음과 같은 요소를 갖습니다.

• 응답이 성공할 경우 – {status:"fulfilled", value:result}
• 에러가 발생한 경우 – {status:"rejected", reason:error}

[
  {status: 'fulfilled', value: ...응답...},
  {status: 'fulfilled', value: ...응답...},
  {status: 'rejected', reason: ...에러 객체...}
]

위처럼 결과마다 다른 상태를 거쳐서 보여줍니다.

3. Promise.race

Promise.race는 Promise.all과 비슷합니다. 다만 가장 먼저 처리되는 프라미스의 결과(혹은 에러)를 반환합니다.

문법 : let promise = Promise.race(iterable);

Promise.race([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("에러 발생!")), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert); // 1

첫 번째 프라미스가 가장 빨리 처리상태가 되기 때문에 첫 번째 프라미스의 결과가 result 값이 됩니다. 이렇게 Promise.race를 사용하면 '경주(race)의 승자’가 나타난 순간 다른 프라미스의 결과 또는 에러는 무시됩니다.

4. resolve & reject

Promise.resolve

 

• Promise.resolve는 주어진 value를 가지고 즉시 이행 상태(Pending이 아닌 Fulfilled)의 프라미스를 생성합니다. 이행 상태 프라미스는 value를 결과로 갖게 됩니다.
• 보통 비동기 작업이 완료되었을 때 이를 결과로 간주하고 프라미스를 이행 상태로 만드는 경우에 유용합니다.

const result = 42;
const promise = Promise.resolve(result);
promise.then(value => {
  console.log(value); // 42
});

 

Promise.reject

 

 

• Promise.reject는 주어진 error를 가지고 즉시 거부 상태(Pending이 아닌 Rejected)의 프라미스를 생성합니다. 거부 상태 프라미스는 error를 거부 이유로 갖게 됩니다.
• 보통 예외 상황이 발생했을 때 이를 거부 상태로 만들고, 이후 .catch 블록 등에서 에러를 처리하는 경우에 사용됩니다.

// 예시: 즉시 거부 상태의 프라미스 생성
const error = new Error('Something went wrong!');
const promise = Promise.reject(error);
promise.catch(err => {
  console.error(err.message); // "Something went wrong!"
});

위 예시에서 Promise.reject(error)는 즉시 거부 상태의 프라미스를 반환하며, .catch 메서드를 사용하여 에러를 처리할 수 있습니다.

요약

Promise 클래스에는 5가지 정적 메서드가 있습니다.

1. Promise.all(promises) – 모든 프라미스가 이행될 때까지 기다렸다가 그 결괏값을 담은 배열을 반환합니다. 주어진 프라미스 중 하나라도 실패하면 Promise.all는 거부되고, 나머지 프라미스의 결과는 무시됩니다.
2. Promise.allSettled(promises) – 최근에 추가된 메서드로 모든 프라미스가 처리될 때까지 기다렸다가 그 결과(객체)를 담은 배열을 반환합니다. 객체엔 다음과 같은 정보가 담깁니다.
   • status: "fulfilled" 또는 "rejected"
   • value(프라미스가 성공한 경우) 또는 reason(프라미스가 실패한 경우)
3. Promise.race(promises) – 가장 먼저 처리된 프라미스의 결과 또는 에러를 담은 프라미스를 반환합니다.
4. Promise.resolve(value) – 주어진 값을 사용해 이행 상태의 프라미스를 만듭니다.
5. Promise.reject(error) – 주어진 에러를 사용해 거부 상태의 프라미스를 만듭니다.