🍪 Promise란 무엇인가?

Promise는 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있게 도와주는 객체이다. Promise 이전에 비동기 처리로 콜백 패턴을 주로 사용했었다. 그러나 콜백 지옥(Callback Hell)으로 인해 가독성도 나쁘고, 비동기 처리 중에 발생한 에러의 처리가 까다로웠다. Promise는 이러한 단점을 보완하기 위해 나온 대안이라고 봐도 무방하다.

👻 끔찍한 Callback에서 벗어나 Promise 적용하기

Promise를 설명하기에 앞서, Callback과 Promise를 통해 짜진 두 코드를 보자.

/* callback */
function add10(a, callback){
   setTimeout(() => callback(a + 10), 100);}

add10(5, res => {
   console.log(res); // 15
});

/* promise */
function add20(a){
   return new Promise(resolve => setTimeout(() => resolve(a + 20), 100));
}

add20(5)
   .then(console.log); // 25

가장 명확하게 보이는 차이는 Promise가 Callback과 달리 결과를 값으로 받아서 저장할 수 있다는 것이다. 즉, Promise는 반환만 하면 되어, 따로 Callback함수를 따로 받을 필요가 없다. 그래서 Promise는 결과 그 자체를 값으로 받기 때문에, 연속으로 실행하는 코드에선 (then() 이용) Callback보다 더 가독성 있는 코드가 된다.

/* callback */
add10(5, res => {
   add10(res, res => {
      add10(res, res => {
         console.log(res); //35
      }); // Callback Hell...
   });
});

/* promise */
add20(5)
   .then(add20)
   .then(add20)
   .then(console.log); //65

🍪 어떻게 구성되어있나?

🔸 프로미스(Promise)의 생성

기본적으로 Promise 객체 생성하기 위한 간단한 코드를 아래처럼 작성 할 수 있다.

// Promise 객체의 생성
const promise = new Promise((resolve, reject) => {
  // 비동기 작업을 수행

  if (/* 비동기 작업 수행 성공 */) {
    resolve('Success');
  }
  else { /* 비동기 작업 수행 실패 */
    reject('Failed');
  }
});

그리고, Promise로 구현된 비동기 함수는 Promise 객체를 반환하며, 이로 구현된 비동기 함수를 호출하는 측에서 Promise 객체의 후속 처리 메서드(then, catch)를 통해 비동기 처리 결과 또는 에러메세지를 전달받아 처리한다. 이를 통해 후속 처리 메서드를 체이닝 방식으로 호출이 가능하다.

※ 첫번째 콜백 함수 내부에서 오류가 날경우, 오류를 제대로 잡지 못하는 경우도 있으므로, 가급적 에러처리는 catch()통해 하는게 좋다.

🔸 프로미스(Promise)의 상태

Promise는 대표적으로 다음과 같은 3가지 상태를 가진다.