Promise.all vs. Promise.allSettled

Promise

JavaScript의 비동기 처리를 위한 표준 객체

서버로부터 데이터를 가져오는 요청을 할 경우 -> 작업이 완료될 때 까지 코드 실행 멈추지 않도록 함 -> 비동기 처리

-> 미래에 완료될 작업에 대한 결과를 처리할 수 있는 객체다.

작업이 성공했는지 실패했는지에 따라 다른 결과를 반환한다.

3가지 상태

 

• Pending (대기 중): 초기 상태로, 아직 작업이 완료되지 않은 상태.
• Fulfilled (이행됨): 작업이 성공적으로 완료되어 결과를 반환한 상태.
• Rejected (거부됨): 작업이 실패하여 에러를 반환한 상태.

Promise 사용법

const myPromise = new Promise((resolve, reject) => {
  const success = true; // 예시로 성공과 실패를 나누는 조건

  if (success) {
    resolve("작업이 성공했습니다!"); // 성공했을 때 결과를 전달
  } else {
    reject("작업이 실패했습니다."); // 실패했을 때 에러 메시지 전달
  }
});


myPromise
  .then((result) => {
    console.log(result); // "작업이 성공했습니다!"가 출력됨
  })
  .catch((error) => {
    console.error(error); // 만약 실패했다면 "작업이 실패했습니다."가 출력됨
  });

 

 

• .then(): 작업이 성공했을 때 호출됨. resolve에 전달된 값이 여기로 넘어와서 처리됨.
• .catch(): 작업이 실패했을 때 호출됨. reject에 전달된 값(에러 메시지)이 여기로 넘어와서 처리됨.

 

Promise.all

전달된 모든 Promise가 성공했을 때 결과를 배열로 반환

모든 Promise가 성공해야 then으로 넘어가고, 하나라도 실패하면 Promise.all은 즉시 .catch로 넘어가서 실패한 이유를 반환한다.

const promise1 = Promise.resolve(10);
const promise2 = Promise.resolve(20);
const promise3 = Promise.resolve(30);

Promise.all([promise1, promise2, promise3])
  .then(values => {
    console.log(values); // [10, 20, 30]
  })
  .catch(error => {
    console.error("Promise 중 하나가 실패했습니다:", error);
  });

 

해당 예시에는 10, 20, 30 모두 출력

하나라도 실패하면 에러를 출력

Promise.allSettled

전달된 모든 Promise가 완료될 때까지 기다리도, 각 Promise의 상태와 결과를 모두 반환.

성공이든 실패든 상관 없이 모든 Promise가 완료될 때까지 기다리고, 그 결과를 객체의 배열로 반환

const promise1 = Promise.resolve(10);
const promise2 = Promise.reject("에러 발생");
const promise3 = Promise.resolve(30);

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    console.log(results);
    // [
    //   { status: "fulfilled", value: 10 },
    //   { status: "rejected", reason: "에러 발생" },
    //   { status: "fulfilled", value: 30 }
    // ]
  });

세 개의 Promise중 두 개는 성공하고 하나는 실패

Promise.allSettled는 모두 완료될 때까지 기다리고 나서 각 Promise의 상태와 값을 반환

-> 성공과 실패 여부를 개별적으로 확인하고 싶을 때 사용

 

요약

 

• Promise.all:
  • 모든 Promise가 성공해야 전체가 성공으로 간주됨.
  • 하나라도 실패하면 전체가 실패로 처리됨.
  • 따라서, 모든 Promise가 반드시 성공해야 하는 경우 사용함.
• Promise.allSettled:
  • 각 Promise의 성공 여부와 관계없이 모두 처리된 후 결과를 반환함.
  • 각 Promise의 상태와 결과를 개별적으로 확인할 수 있음.
  • 따라서, 각 Promise의 성공 여부에 상관없이 전부 완료되는 것이 중요할 때 사용함.