JS | Promise 의 3가지 상태

Promise

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
일반적으로 웹 애플리케이션을 구동할 때 API를 사용하여 서버에 데이터를 요청하고 받아온 데이터를 사용하여 화면을 출력하는데, 데이터를 다 받아오기 전에 화면에 데이터를 표시하려고 하면 빈 화면이나 오류가 발생하는데 이를 해결하기 위한 방법 중 하나가 프로미스이다.

Promise 예제 코드

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

Promise의 3가지 상태(State)

프로미스의 상태란 프로미스의 처리과정을 의미한다.
new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

• Pending(대기) : 비동기 처리 로직이 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환한 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending(대기)

new Promise()

new Promise() 메서드를 호출하면 pending 상태가 된다. 이때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.

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

Fulfilled(이행)

콜백함수의 인자 resolve를 아래와 같이 실행하면 이행 상태가 된다.

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

그리고 이행 상태가 되면 then()을 이용하여 처리결과 값을 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

Rejected(실패)

프로미스 콜백 함수의 인자인 reject를 아래와 같이 호출하면 실패(Rejected) 상태가 된다.

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

실패 상태가 되면 실패 처리의 결과값을 catch()로 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

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