Promise?

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

비동기 처리?
특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미한다.

Promise가 필요한 이유는?

주로 서버에서 받아온 데이터를 화면에 표시할 때 사용된다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다.

$.get('url address/products/1`, function(response){})

위 API가 실행되면 서버에 데이터 하나 보내달라는 요청을 보낸다. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. 이러한 문제를 해결하기위한 방법중 하나가 Promise이다.

예제

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

// getData()의 실행이 끝나면 호출된다.
getData().then((tableData) => {
  console.log(tableData); // $.get()의 response값이 tableData에 전달된다.
})

Promise의 3가지 상태(states)

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

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

예제

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('url address/products/1', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});

위코드는 서버에서 제대로 응답을 받아오면 resolve()메서드를 호출하고, 응답이 없으면 rejcet() 메서드를 호출하는 예제이다. 호출된 메서드에 따라 then() 이나 catch() 로 나누어 응답 결과 또는 오류를 출력한다.

Promise Chaining

프로미스의 또다른 특징으로는 여러개의 프로미스를 연결하여 사용할수 있다는 점이다. 앞 예제에서 then()메서드를 호출하고 나면 새로운 프로미스 객체가 반환된다. 아래의 예제를 보자.

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 2000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31
});

위 코드는 프로미스 객체를 하나 생성하고 setTimeout()을 이용해서 2초후에 resolve()를 호출하는 예제이다. 이행상태로 넘어가는게 성공했을 경우 위에서 아래순서로 로직이 이행된다.

프로미스의 에러 처리 방법

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

getData().then( 
  handleSuccess,
  handleError
)

2.catch()를 이용하는 방법 -> 가급적 이방법으로 에러처리를 해야 한다!

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

---

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