프로미스(Promise)

• 비동기 처리의 결과를 제공하겠다는 약속을 반환
• 단, 비동기 처리가 끝날 때 까지 결과를 기다리는 것은 아니다.
• new 키워드를 통해 생성
• 프라미터로 두개의 콜백함수를 가진다.
  • resolve 작업이 성공했을 때 성공임을 알려주는 객체
  • reject 작업이 실패했을 때 실패임을 알려주는 오류 객체
• 프로미스를 사용하면 콜백 지옥(Callback Hell)을 대체할 수 있고, 비동기 작업의 흐름을 쉽게 제어 할 수 있다.

// callback Hell
setTimeout(() => {
  console.log('A');
  setTimeout(() => {
    console.log('B');
      setTimeout(() => {
      console.log('C');
    }, 1000);
  }, 2000);
}, 3000); 

// 위의 콜백 지옥을 프로미스로 대체 
function pro1(str, ms) {
  return new Promise((resoleve, reject) => {
    setTimeout(() => {
      if(str === 'A' || str === 'B' || str === 'C'){
        console.log(str);
        return resoleve();
      } else {
        reject();
      }
    }, ms);
  });
}

Promise 객체 처리

• 생성한 프로미스 객체를 프로미스 핸들러를 통해 성공과 실패에 대한 후속 처리 진행
• 프로미스 핸들러
  • then 작업 성공으로 프로미스 객체 내부에서 resolve()를 호출하면 then 메소드의 콜백 함수를 통해 추가 작업 진행
  • catch 작업 실패로 프로미스 객체 내부에서 reject()를 호출하면 catch메소드의 콜백 함수를 통해 추가 작업 진행
  • finally 작업 성공/실패 여부와 상관 없이 항상 마지막에 실행되는 추가 작업
• 프로미스 핸들러를 연달아 연결해서 사용하는 것을 프로미스 체이닝이라고 한다.

pro1('A', 500)
.then(() => {
  console.log('Then');
}) // 작업이 성공했을 때, than() 실행
.catch(() => {
  console.log('Catch');
}) // 작업이 실패했을 때, catch() 실행
.finally(() => {
  console.log('Finally')
}); // 성공, 실패 여부 상관 없이 무조건 finally(); 실팽

pro1('A',3000)
.then(() => {
  pro1('B', 2000)
  .then(() => {
    pro1('C', 1000)
    .then()
    .catch();
  })
  .catch();
})
.catch();

pro1('A',3000)
.then(() => {
  return pro1('B', 2000);
})
.then(() => {
  return pro1('C', 1000);
})
.catch();

Promise 객체 상태

• 대기(Pending) 처리 진행중으로 아직 비동기 처리 로직이 완료되지 않은 상태
• 이행(Fulfilled) 비동기 처리 로직이 성공해 resolve()가 수행되면서 완료된 상태
• 거부(Rejected) 비동기 처리 로직이 실패해 reject()가 수행 되면서 오류가 발생한 상태

프로미스 지옥(Promise Hell)

• 콜백 지옥을 극복하기 위해 탄생했으나 프로미스 체이닝이 지나치게 반복되면 코드 가독성이 떨어질 수 있다. 이를 극복하기 위해 async / await 키워드가 도입.