[JS] Promise 개념 및 활용

🌟 Promise

• ES6 
• 자바스크립트에서 제공하는 비동기 코드를 간편하게 처리할 수 있도록 도와주는 object
• 프로미스는 어떤 기능을 실행하고 나서 정상적으로 동작하면, 성공의 메세지와 함께 처리된 결과값을 전달해준다.
  만약 예상치 못한 문제가 발생하면 error를 전달해준다.
• Producer vs Consumer (생산자와 사용자 차이점 이해)
• 비동기 수행상태를 가진다. 

Promise State

pending(보류) -> fulfilled(이행) or rejected(거부)

 

1. Producer (생산자)

• Promise 객체가 생성되는 즉시 executor(콜백함수)가 실행된다.

const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read file O/I)
  console.log('doing something...');
  setTimeout(() => {
    resolve('ellie');
    // reject(new Error('no network'));
  }, 2000);
});

2. Consumer (소비자)

• then, catch, finally

promise
  .then((value) => {
    // promise가 정상적으로 수행되면 resolve로 전달한 value가 들어옴
    // then을 호출하면 다시 promise가 호출됨.
    console.log(value);
  })
  .catch((error) => console.log(error))
  .finally(() => console.log('finally'));

3. Promise chaining

• 구조화된 콜백 작성가능!

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));

 

4. Error handling

• catch로 error를 헨들링 할 수 있다
• error가 발행해도 catch를 이용하면 전체적인 Promise 체인에 문제가 발생하지 않도록 처리를 할 수 있다.

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) //(hen) => getEgg(hen) 생략가능
  .catch((error) => {
    return '🥯'; // 계란을 받아올 때 에러가 발생하면 빵으로 대체
  })
  .then(cook)
  .then(console.log)
  .catch(console.log);

 

참고

🌟드림코딩 엘리님의 youtube강의를 보고 공부한 내용을 정리한 포스팅입니다🌟

👉youtube강의 https://www.youtube.com/watch?v=JB_yU6Oe2eE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=12