Promise

Promise란

자바스크립트 비동기 처리에 사용되는 객체이다. 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 말한다. Promise 이전에 비동기 처리로 콜백 패턴을 주로 사용했었다. 그러나 콜백 지옥(Callback Hell)으로 인해 가독성도 나쁘고, 비동기 처리 중에 발생한 에러의 처리가 까다로웠다. Promise는 이러한 단점을 보완하기 위해 나온 대안이라고 할 수 있다.

사용법

function getData(callback) {
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      resolve(response);
    });
  });
}

getData().then(function(tableData) {
});

다음과 같이 return new Promise(function(resolve,reject))와 .then 등을 이용해서 작성한다.

propmise 상태

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

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

다음과 같이 new Promise() 메서드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.

• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

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

콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 되고, 이행 상태가 되면 위와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다.

• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

new Promise(function(resolve, reject) {
  reject();
});
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

위와 같이 reject를 호출하면 실패(Rejected) 상태가 된다.또한 catch로 실패한 이유를 받을 수 있다.

여러 개의 Promise 연결하기

Promise에 또 다른 특징은 여러 개의 Promise를 연결하여 사용할 수 있다는 점이다. 앞 예제에서 then() 메서드를 호출하고 나면 새로운 Promise 객체가 반환된다. 따라서, 아래와 같이 코딩이 가능하다.

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

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

프로미스의 에러 처리 방법

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

getData().then(
  handleSuccess(){},
  handleError(){}
);

2.catch()를 이용하는 방법

getData().then().catch(function(err) {
  console.log(err);
});