Promise

Promise 무겁고 오래걸리는 일이 있다면 우리 코드 내부에서 조금 더 비동기적으로 처리할 수 있도록 도와준다. 그래서 Promise를 이용해서 내가 언제 끝날지 모르겠는데 그냥 여기 Promise가 있어 내가 약속해줄테니까 일이 끝나면 내가 알려줄게 일이 끝나면 니가 원하는 일을 수행해줄게라고 약속합니다. 그래서 Promise에서는

• 내가 일이 끝난 다음에 등록할 수 있는 then
• 에러가 발생했을 때 잡을 수 있는 catch와
• 최종적으로 모든 일이 끝났을 때 사용할 수 있는 finally가 있다.

mdn 공식문서에 따르면 Promise는

The Promise object represents the eventual completion ( or failure) of an asynchronous(비동기적) operation and its resulting value

그리고 Promise는 상태가 3가지

• pending: initial state, neither fulfilled nor rejected. 이제 막 Promise가 만들어져서 일이 끝나지 않은 상태

• fullfiled : 비동기적 코드가 성공적으로 실행된 상태

• rejected : 실패한 상태, 에러가 발생한 상태

   Promise객체를 만들때는 new 연산자 사용해야하고 생성자 안에는 Promise를 만들 수 있는 콜백함수를 전달해야 한다. 이 콜백함수는 Promise에 의해서 호출될 거고. 성공할 때 호출할 수 있는거 , reject할 때 호출할 수 있는 각각의 콜백함수를 받아와서 비동기적인 일을 받아와 성공했다면 resolve를 호출하고 실패했다면 reject를 호출하면 Promise를 만들 수 있다.
   Promise를 만들 때 우리가 두가지 인자를 전달받아서 무언가 처리하는 콜백함수를 전달해야 합니다. 이 Promise 콜백함수 안에서 우리가 비동기적인 일을 수행할 건데 여기에서 성공적으로 수행했을 때 즉, then을 호출할 때 사용할 resolve 라는 함수와 실패한 걸 알려주는 reject를 받아와야 한다. 그래서 이 콜백함수 안에서 우리가 비동기적인 일을 수행하면 된다. reject를 할 때는 Error 오브젝트를 만들어줘야 한다.

예제1)

function runInDelay(seconds) {
  return new Promise((resolve, reject) => {
    if (!seconds || seconds < 0) {
      reject(new Error('seconds가 0보다 작음'));
    }
    setTimeout(resolve, seconds * 1000);
  });
}

runInDelay(2)
  // Promise가 끝이 나면, 성공적으로 된다면
  .then(() => console.log('타이머 완료!')) 
//.catch(error => console.error(error))인데 전달된 인자와 
//호출할때 전달하는 인자가 똑같으니 생략가능
  .catch(console.error) // 에러가 발생했다면 에러를 처리
  // then과 catch는 둘중 하나만 호출. finally는 최종적으로 무조건 호출됨
  .finally(() => console.log('끝났다!'));

예제2)

function fetchEgg(chicken) {
  return Promise.resolve(`${chicken} => :달걀:`);
}
function fryEgg(egg) {
  return Promise.resolve(`${egg} => :계란_프라이:`);
}
function getChicken() {
  return Promise.resolve(`:화분에_심긴_식물: => :수탉:`);
}
getChicken()
// `:화분에_심긴_식물: => :수탉:`이 chicken으로 전달됨
  .then(chicken => {return fetchEgg(chicken))} //=.then(fetchEgg)
//`:화분에_심긴_식물: => :수탉: => :달걀:`이 egg로 전달됨
  .then(egg => fryEgg(egg))//=.then(fryEgg)
//`:화분에_심긴_식물: => :수탉: => :달걀: => :계란_프라이:`가 friedEgg로 전달됨
  .then((friedEgg)=>console.log(friedEgg));

// :화분에_심긴_식물: => :수탉: => :달걀: => :계란_프라이: 출력됨