JavaScript - Promise (프로미스)

비동기 처리를 위한 콜백 패턴은 콜백 헬이나 에러 처리가 곤란하다는 문제가 있다. 이를 극복하기 위해 ES6에서 프로미스가 도입되었다.

프로미스의 생성

promise 생성자를 new 연산자와 함께 호출하면 프로미스를 생성한다.
promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받는다.

const promise = new Promise((resolve, reject) => {
  if (/* 비동기 처리 성공 */) {
    resolve('result');
  } else { /* 비동기 처리 실패 */
    reject('failure reason');
  }
});

promise 생성자 함수가 인수로 전달 받은 콜백 함수 내부에서 비동기 처리를 수행한다. 이때 비동기 처리가 성공하면 콜백 함수의 인수로 전달 받은 resolve 함수를 호출하고, 비동기 처리가 실패하면 reject 함수를 호출한다. 비동기 함수 get을 프로미스를 사용해 구현해 보자.

const promiseGet = url => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.send();

    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject(new Error(xhr.status));
      }
    };
  });
};

프로미스는 다음과 같이 현재 비동기 처리가 어떻게 진행되고 있는지를 나타내는 상태 정보를 갖는다.

• pending - 비동기 처리가 아직 수행되지 않은 상태 - 프로미스가 생성된 직후 기본 상태
• fulfilled - 비동기 처리가 수행된 상태(성공) - resolve 함수 호출
• rejected - 비동기 처리가 수행된 상태(실패) - reject 함수 호출

프로미스는 비동기 처리 상태와 처리 결과를 관리하는 객체다.