기본문법

var promise = new Promise(function(resolve, reject){…});

• resolve : 함수 안의 처리가 끝났을 때 호출해야 하는 콜백함수. resolve 함수에는 어떠한 값도 인수로 넘길 수 있음. 이 값은 다음 처리를 실행하는 함수에 전달된다.
• reject : 함수 안의 처리가 실패했을 때 호출해야 하는 콜백함수. reject 함수에는 어떠한 값도 인수로 넘길 수 있음. 대부분의 경우 오류 메시지 무자열을 인수로 사용한다.

예1) then(성공했을때)과 catch(실패했을 때)문

var promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    var n = parseInt(prompt("10미만의 숫자를 입력하시오"));
    if (n <= 10) {
      resolve(n);
    } else {
      reject(`오류: ${n}은 10이상입니다.`);
    }
  }, 1000);
});
promise
  .then(function(num) {
    console.log(num);
  })
  .catch(function(error) {
    console.log(error);
  });

예2) then(resolve, reject)를 catch문 없이 동시에 구현가능.

var promise = new Promise(function(resolve, reject) {
  setTimeout(function() {
    var n = parseInt(prompt("10미만의 숫자를 입력하시오"));
    if (n <= 10) {
      resolve(n);
    } else {
      reject(`오류: ${n}은 10이상입니다.`);
    }
  }, 1000);
});
promise.then(
  function(num) {
    console.log(num);
  },
  function(error) {
    console.log(error);
  }
);

Promise 콜백함수에 인수 넘기기 ( + 메서드체인)

function buyAsync(mymoney) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      var payment = parseInt(prompt("지불하고자 하는 금액을 입력하십시오"));
      var balance = mymoney - payment;
      if (balance > 0) {
        console.log(`${payment} 원을 지불햇습니다.`);
        resolve(balance);
      } else {
        reject(`잔액은 ${mymoney}원 입니다. 구매할 수 없습니다.`);
      }
    }, 1000);
  });
}

buyAsync(500)
  .then(function(balance) {
    console.log(`잔액은 ${balance}원 입니다.`);
    return buyAsync(balance);
  })
  .then(function(balance) {
    console.log(`잔액은 ${balance}원 입니다.`);
    return buyAsync(balance);
  });

병렬로 실행하는 Promise.all과 Promise.race 메서드

• Promise.all : 모든 실행함수가 resolve로 종료되면, response 배열이 반환됨.
• Promise.race : 먼저 종료한 작업이 성공 또는 실패 콜백을 호출하고 결과값을 반환. 나머지 작업은 실행만 함.

function buyAsync(name, mymoney) {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      var payment = parseInt(
        prompt(`${name}님, 지불하고자 하는 금액을 입력하십시오`)
      );
      var balance = mymoney - payment;
      if (balance >= 0) {
        console.log(`${name} : ${payment} 원을 지불햇습니다.`);
        resolve(balance);
      } else {
        reject(`${name} : 잔액은 ${mymoney}원 입니다. 구매할 수 없습니다.`);
      }
    }, 1000);
  });
}

Promise.all([
  //or race
  buyAsync("Tom", 500),
  buyAsync("Huck", 1000),
  buyAsync("Becky", 600)
])
  .then(function(balance) {
    console.log(balance);
  })
  .catch(function(error) {
    console.log(error);
  });

//Promise.all 결과
//Tom : 100 원을 지불햇습니다.
//Becky : 100 원을 지불햇습니다.
//Huck : 100 원을 지불햇습니다.
//(3) [400, 900, 500]

//Promise.race 결과
//Tom : 400 원을 지불햇습니다.
//100
//Huck : 400 원을 지불햇습니다.
//Becky : 400 원을 지불햇습니다.

callback이란?

함수를 인수로 받아서 처리하는 방식으로, 이러한 패턴이 깊어지면 가독성이 떨어져 callback 지옥이라 함.

firstFunction(args, function() {
  secondFunction(args, function() {
    thirdFunction(args, function() {
      // And so on…
    });
  });
});

Promise 장점

• 가독성이 떨어질수 있는 콜백 지옥을 피할 수 있다.
• then() 을 이용하여 가독성 좋은 연속적인 비동기 코드를 쉽게 작성할 수 있다.
• Promise.all() 을 사용하여 병렬 비동기 코드를 쉽게 작성할 수 있다.
• Promise를 통해 콜백만 사용하는 코딩 방식에 있는 다음과 같은 상황이 발생하지 않습니다.
  • 콜백을 너무 빨리 호출함.
  • 콜백을 너무 늦게 호출하거나 호출하지 않음
  • 콜백을 너무 적게 호출하거나 너무 많이 호출함
  • 필요한 환경/매개벼누를 전달하는데 실패함
  • 발생가능한 오류/예외를 무시함