자바스크립트 - 프로미스

꼭~꼭~ 약속해~

자바스크립트에서 Promise(프로미스)는 어떤 작업이 완료된 후 그 결과를 응답하겠다는 "약속"을 표현하는 객체입니다. 단어의 뜻(promise: 약속, 약속하다)과 아주 찰떡인 것 같습니다.

new Promise(executor)

프로미스는 위와 같이 생성하는데, Promise 객체는 내부에 선언함과 동시에 즉시 실행되는 executor 함수를 받습니다.

new Promise((resolve, reject) => {
  // 비동기 작업 실행
  // 작업 성공 → resolve()
  // 작업 실패 → reject()
});

executor 함수는 (resolve, reject) => {} 로 표현되는데,

여기서 중요한 포인트:

• executor 함수는 resolve와 reject라는 두 가지 콜백 함수를 인자로 받습니다.
• 비동기 작업이 성공하면 resolve()를 호출해 약속을 이행(fulfilled)합니다.
• 오류가 발생하면 reject()를 호출해 약속을 거부(rejected)합니다.

예를 들어 서버로부터 데이터를 받는 비동기 통신을 한다고 가정해보자.

1. 비동기 통신을 위해 Promise 객체가 선언되고 선언됨과 동시에 executor 함수가 실행된다.
2. executor 함수 안에 있는 서버와 통신하는 비동기 작업이 실행된다.
3. 비동기 작업이 성공하면 resolve(), 실패하면 reject()가 호출된다.

비동기 통신의 대표인 fetch 함수를 보면 이해하기 쉽다.

function fetch(url, options) {
  return new Promise((resolve, reject) => { // Promise 객체가 선언되고 executor 함수가 즉시 실행된다.
    const xhr = new XMLHttpRequest();
    xhr.open(options?.method || "GET", url); // 비동기 작업

    // 성공 (resolve 호출)
    xhr.onload = () => {
      resolve(new Response(xhr.responseText, { status: xhr.status }));
    };

    // 실패 (reject 호출)
    xhr.onerror = () => {
      reject(new TypeError("Network request failed"));
    };

    xhr.send(options?.body || null);
  });
}

---

🚀 주요 Promise 고급 기능 정리

1. Promise.all() - 여러 Promise를 병렬 실행하고, 전부 완료될 때까지 기다림.
2. Promise.allSettled() - 성공/실패 상관없이 모든 Promise의 결과를 배열로 반환 실패가 있어도 멈추지 않음.
3. Promise.race() - 가장 먼저 완료된 Promise의 결과만 반환 여러 요청 중 가장 빠른 응답만 사용
4. Promise.any() - 여러 Promise 중 첫 번째로 성공한 것만 반환. (실패는 무시)
5. Promise.resolve() / Promise.reject() - 즉시 resolve/reject된 Promise 생성.