Promise

Promise란

Promise의 개념

Promise는 자바스크립트 비동기 처리에 사용되는 객체입니다.

jQery ajax 코드

function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}

getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});

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에 전달됨
});

위의 두 코드를 이용해 API가 실행되면 서버에 요청을 보냅니다. 그런데 jQuery ajax의 경우에는 서버에서 데이터를 받아오기도 전에 마치 데이터를 받은 것 처럼 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 나타납니다. 이러한 문제점을 해결하기 위해 Promise가 있습니다.

Promise의 3가지 상태

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

여러 개의 Promise 연결

Promise의 특징 중 하나는 여러 개의 Promise를 연결하여 사용할 수 있다는 점입니다.

function getData() {
  return new Promise({
    // ...
  });
}

// then() 으로 여러 개의 프로미스를 연결한 형식
getData()
  .then(function(data) {
    // ...
  })
  .then(function() {
    // ...
  })
  .then(function() {
    // ...
  });

Promise의 에러 처리

then()의 두 번째 인자로 에러를 처리하는 방법

getData().then(
  handleSuccess,
  handleError
);

catch()를 이용하는 방법

getData().then().catch();

Promise의 에러 처리를 하는 방법에는 catch()를 사용하는 방법이 권장되고 있습니다. then을 사용할 경우, 에러 처리 코드를 포함하는 then()에 문제가 발생하면 에러 처리를 하지 못 하고 오류가 발생합니다. 하지만 catch를 사용하게 되면 정상적으로 오류 처리를 할 수 있습니다.

참고: https://joshua1988.github.io/web-development/javascript/promise-for-beginners/