Promise

자바스크립트에서 비동기 처리를 위해서 콜백함수를 사용하는데 콜백함수는 콜백지옥을 만들어 가독성이 나쁘고, 비동기 처리 중 발생한 에러 처리가 어렵습니다. 그래서 등장한게 Promise 입니다.

Promise는 콜백지옥 같은 코드가 형성되지 않게 하는 방안으로 ES6에 도입된 기능입니다.

프로미스 처리 흐름 - 출처 : MDN

Promise의 상태

Promise의 상태는 3가지가 있습니다.

• Pending(대기) : 비동기 처리가 아직 수행되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 수행된 상태 (성공)
• Rejected(실패) : 비동기 처리가 수행된 상태 (실패)

Pending(대기)

아래와 같이 new Promise() 메서드를 호출하면 대기(pending) 상태가 됩니다.

new Promise();

new Promise() 메서드를 호출할 때 콜백함수를 선언할 수 있고, 함수의 인자는 resolve, reject 입니다.

new Promise(function(resolve, reject){
   // ...
})

Fulfilled(이행)

resolve 인자를 실행하면 fulfilled 상태가 됩니다.

new Promise(function(resolve, reject){
   resolve();
})

Promise에서 resolve된 값은 .then()으로 받아올 수 있습니다.

function increase(number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = number + 10;
      resolve(result);
    },1000)
  });
}

increase(0).then(number => console.log(number)) // 10

Rejected(실패)

reject 인자를 실행하면 rejected 상태가 됩니다. 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 .catch()로 받을 수 있습니다.

function increase(number) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = number + 10;
      if(result > 10){ // 10보다 크면 에러 발생
        reject(new Error('숫자가 너무 커요 !'));
      }
      resolve(result);
    },1000)
  });
}

increase(0).then(first => {
  console.log(first);  // 10
  return increase(first)
}).then(second => {
  console.log(second);
  return increase(second);
}).catch(e => {
  // 도중에 에러가 발생하면, .catch를 통해 알수 있음
  console.log(e); // error
});

참고

• 캡틴판교님의 자바스크립트 Promise 쉽게 이해하기
• VELOPERT님의 리액트를 다루는 기술 - 개정판
• MDN - Promise