프로미스(Promise)란

Promise란

“A promise is an object that may produce a single value some time in the future”

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.

Promise가 왜 필요한가?

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다.
일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 작성한다. 하지만 자바스크립트의 특성상 논블럭킹으로 비동기 동작이기에 계속 작업을 처리하고, 해당 결과처리에 상관없이 자신의 작업이 끝나면, 처리되지 않은 결과를 보여주게 된다.
이를 해결하기위해 promise를 사용한다.

Promise 예시

function getData(url) {
  return new Promise(function (resolve, reject) {
    fetch(url).then(function (response) {
      resolve(response);
    });
  });
}

getData().then(function (table) {
  console.log(table);
});

Promise의 3가지 status

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

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

1. Pending(대기)
   • 먼저 객체를 생성하면 대기상태가 된다.

     new Promise();
     

     new Promise()를 선언할 때 콜백 함수를 선언가능 한데, 파라미터로 resolve, reject가 있다.

2. Fulfilled(이행)

   • 콜백 함수의 파라미터 resolve를 실행하면 이행(fulfilled)상태가 된다.

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

3. Reject(실패)

   • 아래와 같이 reject()를 호출하면 실패 상태가 된다.

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

   아래와 같이 처리할 수 있다.

   function getData() {
     return new Promise(function (resolve, reject) {
       reject(new Error("fail!"));
     });
   }
   
   getData()
     .then()
     .catch(function (err) {
       console.log(err);
     });