Promise의 생김새와 3가지 상태

Promise는 비동기에서 성공과 실패를 분리해 메서드를 수행한다.

 

Promise#1 예측 가능한 콜백, Promise 에 이은 글

 

Promise는 함수 하나를 인자로 받는다.

Promise는 resolve(성공), reject(실패) 콜백을 가진 함수로 새 Promise 인스턴스(아래 코드에서 p1)가 만들어진 형태이다.

resolve / reject 둘 중 하나의 콜백함수가 반드시 한 번 실행된다.

let p1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    if(true) {
      console.log('done');
      resolve();
    } else reject();
  }, 1000);
};

 

Promise의 3가지 상태

Pending(대기)

비동기 처리 로직이 아직 완료되지 않은 상태.
resolve 또는 reject 중 하나를 반드시 호출해야 한다. (여러 개 호출해도 최상단의 한 개만 정상 호출됨)

// new Promise()메서드를 호출하면 Pending상태가 됨
new Promise(function (resolve, reject) { // 호출할 때 콜백 함수의 인자로 resolve, reject에 접근 가능
 // ...
});

 

Fulfilled(이행)

비동기 처리가 완료되어 결과 값을 반환해 준 상태 (= 완료)

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

이행 상태가 되면 then()을 이용해서 결과 값을 받을 수 있다.

function getData() {
    return new Promise(function(resolve, reject) {
        let name = 'minji';
        resolve(name);
    });
}

//resolve()의 결과 값 name을 resolvedData에 받음
getData().then(function (resolvedData) {
    console.log(resolvedDate);
});

 

Rejected(실패)

비동기 처리가 실패하거나 오류가 발생한 상태

function getData() {
  return new Promise(function (resolve, reject) {
    reject(new Error("Request is failed")); // 이렇게 Error객체를 사용할 것을 추천
  });
}

실패 상태가 되면, 두 가지 방법으로 결과 값(오류의 내용)을 받을 수 있다.

• then()의 두 번째 인자로 처리
  ㄴ getData()함수에서 resolve()메서드를 호출하여 정상적으로 처리했지만, then()의 첫번째 콜백함수 내에서 오류가 날 경우 제대로 잡아내지 못함

  getData().then(function () {
  // ...
  }, function (err) {
  console.log(err); // Error: Request is failed
  });

• catch()로 처리
  ㄴ 권장하는 방법!

  // reject()의 결과 값 Error를 err에 받음
  getData().then().catch(function (err) {
  console.log(err); // Error: Request is failed
  });