Promise

Promise는 무엇

프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다.

예시 (콜백함수)

function printAll(){
  printString("A", () => {
    printString("B", () => {
      printString("C", () => {})
    })
  })
}
printAll()

예시 (promise 사용)

function printAll(){
  printString("A")
  .then(() => {
    return printString("B")
  })
  .then(() => {
    return printString("C")
  })
}
printAll()

프로미스의 세 가지 상태

• Pending(대기) : 비동기 작업이 아직 완료되지 않았습니다.
• Fulfilled(성공) : 작업이 완료되었으며 값을 가지고 있습니다.
• Rejected(실패) : 에러나 실패와 함께 작업이 완료되었습니다.

프로미스 체이닝

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

위 코드는 프로미스 객체를 하나 생성하고 setTimeout()을 이용해 2초 후에 resolve()를 호출하는 예제입니다.

resolve()가 호출되면 프로미스가 대기 상태에서 이행 상태로 넘어가기 때문에 첫 번째 .then()의 로직으로 넘어갑니다. 첫 번째 .then()에서는 이행된 결과 값 1을 받아서 10을 더한 후 그다음 .then() 으로 넘겨줍니다. 두 번째 .then()에서도 마찬가지로 바로 이전 프로미스의 결과 값 11을 받아서 20을 더하고 다음 .then()으로 넘겨줍니다. 마지막 .then()에서 종 결과 값 31을 출력합니다.

프로미스 에러 처리 방법

then()로 처리하기

function getData() {
  return new Promise(function (resolve, reject) {
    reject('failed');
  });
}

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

catch()로 처리하기 (추천)

function getData() {
  return new Promise(function (resolve, reject) {
    reject('failed');
  });
}

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

참고
https://medium.com/front-end-weekly/callbacks-promises-and-async-await-ad4756e01d90
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise