[ JavaScript ] Promise

Promise

• 비동기 작업의 성공 또는 실패를 나타내는 객체
• 비동기 처리 완료 후, 결과를 나중에 처리하기 위한 약속

Promise의 3가지 상태

• Pending(대기) : 비동기 작업이 아직 끝나지 않은 초기 상태
• Fulfilled(이행) : 비동기 작업이 성공적으로 완료된 상태
• Rejected(거절) : 비동기 작업이 실패한 상태

Promise 객체 생성 및 사용법

Promise 생성자 함수

• Promise 생성자 함수는 비동기 작업을 수행하고, 결과를 반환하는 함수를 인자로 받음 (resolve, reject)

• resolve : 비동기 작업 성공 시 호출, 이행 상태로 변경

• reject : 비동기 작업 실패 시 호출, 거절 상태로 변경

• resolve 또는 reject 함수 호출 시 비동기 작업 종료

Promise 객체 생성

[ 예시 ]

// Promise 생성자 함수를 직접 사용하는 방법
// new Promise() : 생성자 함수
// (resolve, reject) => {} : 비동기 작업을 수행하고, 결과를 반환하는 함수

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 흉내
  setTimeout(() => {
    const random = Math.random(); // 랜덤 숫자 생성

    if (random > 0.5) {
      resolve("숫자가 0.5 이상! 성공"); // 성공 시 반환
    } else {
      reject("숫자가 0.5 이하! 실패"); // 실패 시 반환
    }
  }, 1000);
});

Promise 객체 사용법

• then() : 비동기 작업 성공 시 실행, resolve 함수 호출 시 실행
• catch() : 비동기 작업 실패 시 실행, reject 함수 호출 시 실행
• finally() : 성공/실패 와 관계없이 항상 실행

[ 예시 ]

promise
  .then((result) => console.log(result)) // 성공(Fulfilled) 시 실행
  .catch((error) => console.log(error)) // 실패(Rejected) 시 실행
  .finally(() => console.log("비동기 처리 작업 완료")); // 성공/실패와 관계없이 항상 실행

Promise 체이닝

여러 개의 비동기 작업 처리

• then() 함수를 여러 번 사용하여 여러 비동기 작업을 순차적으로 처리하는 기법

[ 예시 ]

const promise = new Promise((resolve, reject) => {
  resolve(1);
});

promise
  .then((result1) => {
    console.log(result1);
    return result1 + 1; // 다음 then() 함수 내 콜백 함수의 인자로 전달
  })
  .then((result2) => {
    console.log(result2);
    return result2 + 2; // 다음 then() 함수 내 콜백 함수의 인자로 전달
  })
  .then((result3) => {
    console.log(result3);	// 4
  });