[JS] Promise 개념

• Promise: Javascript에서 비동기 동작(asynchronous operation)을 간편하게 처리할 수 있도록 도와주는 object
  • State: pending -> fullfilled or rejected
  • Producer vs Consumer

// 1. Producer
// when new Promise is created, the executor function(resolve, reject) runs automatically.
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    // resolve('jiyaho'); // 기능을 성공적으로 수행한 경우 가공한 데이터를 resolve callback function을 통해 전달
    reject(new Error('no network'));
  }, 2000);
});

// 2. Consumer: then, catch, finally를 이용해 값을 받아올 수 있음
promise
  .then(value => { // promise가 잘 수행된다면 resolve의 value(jiyaho)를 받아옴
    console.log(value);
  })
  .catch(error => {
    console.log(error); // Error: no network
  })
  .finally(() => {
    console.log('finally'); // finally: resolve되든 reject되든 결과에 상관없이 마지막에 호출되는 함수
  });

// 3. Promise chainging
const fetchNumber = new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
});

fetchNumber
  .then(num => num * 2)
  .then(num => num * 3)
  .then(num => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(num -1), 1000);
    });
  })
  .then(num => console.log(num)); // 5

// 4. Error Handling
const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('🐓'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`error! ${hen} => 🥚`)), 1000);
  });
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🍳`), 1000);
  });

getHen()
  .then(getEgg)
  .catch(error => {
    return '🥖'; // 🥖 => 🍳
  })
  .then(cook)
  .then(console.log)
  // 모두 resolve 였을때의 결과: 🐓 => 🥚 => 🍳

• 참고 영상 링크: https://www.youtube.com/watch?v=JB_yU6Oe2eE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=12