promise - JavaScript

프로미스를 처음 배울 때 'resolve reject는 어디갔지? .then은 어디갔지?'하며 혼란스러워 한다.

왜 혼란스러운가?

프로미스 인스턴스를 만드는 것(프로미스를 만들기)과 프로미스를 사용하는 것(비동기로 코드 짜기)이 다르다는 것을 이해하지 못했기 때문이다.

 

프로미스 인스턴스를 만들 때 new Promise를 사용하고, 에러가 났을 경우(rejected(거부) 상태) reject, 에러가 나지 않았을 경우(fulfilled(이행) 상태) resolve를 이용해 표현한다.(추가로 '대기'인 pending 상태가 있지만 그건 따로 찾아보길 바란다).

프로미스 인스턴스를 만드는 예)

//예시 1
function getData() {
  return new Promise(function(resolve, reject) { 
  //주의! 함수로 만드는 프로미스 인스턴스는 꼭 return해야 한다!
    if(!err) { //에러가 일어나지 않았다면
      let data = 100;
      resolve(data); //에러가 일어나지 않아 fulfilled 상태일 때 resolve 인자에 data를 담는다.
    } else { //에러가 일어났다면
      reject(new Error('Error occured!')) //에러가 생겨 rejected 상태일 때 reject 인자에 에러를 담는다.
    }
  })
}

//예시 2
let myPromise = new Promise((resolve, reject) => {
  setTimeOut(function(){
    resolve("Success!");
  }, 250);
})

 

 

이렇게 만들어진 프로미스 인스턴스를 프로미스를 사용할 때 .then으로 체이닝(앞에서 리턴을 받아 인자로 사용한다)한다.

에러가 생길 경우 어느 단계에서 에러가 났는가는 상관 없이 .catch로 에러를 다룬다.

그리고 중요한 점은, 체이닝되는 프로미스 코드는 '프로미스타입'의 반환값을 리턴한다는 점이다. 

프로미스를 사용하는 예)

//예 1
getData().then(function(data) { //then으로 체이닝한다.
  console.log(data); 
}).catch(function(err) { 
//.catch로 체이닝 과정에서 일어나는 에러를 핸들링한다. .catch 외에도 
//.then의 두 번째 인자로 핸들링이 가능하다.
  console.error(err);
});


//예 2
myPromise.then((successMessage) => { //then으로 체이닝한다.
  console.log("Yay! " + successMessage);
}); //.catch를 생략해도 실행이 되지만 오류가 일어날 경우 핸들링이 되지 않는다.

 

 

 

참고

joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기