[TIL] JavaScript: Promise 🤙

🔑 Point
🎉 promise?
🎉 promise state
🎉 consumer: then, catch, finally

---

1. promise 란?

• 자바스크립트 안에 내장되어 있는! 비동기를 간편하게 처리할 수 있도록 도와주는 object입니다!
• 정해진 기능을 수행하고, 정상적으로 처리되었다면 값을, 그렇지 않다면 Error를 전달해 줍니다.
• callback함수 대신 깔끔하고 유용하게 쓸 수 있습니다.

Promise를 공부하며 초점을 둬야 할 내용

• 'state, 상태'에대해 이해하기.
  pending state -> fulfiied state || rejected state
• producer(정보 제공)와 consumer(정보 이용) 이해하기!

2. Promise Object만들기!

promise를 만드는 구조는 간단하게 아래처럼 표현할 수 있습니다.

const promise = new Promise(resolve, reject) => {});

const promise = new Promise(resolve, reject) => {
	setTimeout(() => {
    resolve('hyojin'); --case A
    reject(new Error('no network'));-- case B
    }, 2000);
});

주의
⭐️ pormise를 만드는 순간 바로 네트워크 통신을 수행하게 된다.
⭐️ 따라서 사용자가 요구할 때만(ex_버튼을 누를 때) 실행하고 싶다면, 이 점을 염두해야한다.

3. Promise 사용하기! consumer 만들기: then, catch, finally

1) then: 성공적인 케이스일 때 -> resolve 호출

2) catch: 에러가 발생했을 때 -> reject 호출

3) finally: 성공, 실패 상관없이 무조건 마지막에 호출 됨

Promise
  .then(value => {
  console.log(value);
  })
  .catch(error => {
  console.log(error);
  })
  .finally(() => {
  console.log('finally');
  });

2) catch를 사용하여 오류 잘 처리하기~

• 오류가 없을 때

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('🐓'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${hen} => 🥚`), 1000);
  });
const cook = egg => 
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🍳`), 1000);
  });

getHen()
  .then(hen => getEgg(hen))
  .then(egg => cook(egg))
  .then(meal => console.log(meal));
---------------------------------------------
// 🐓 => 🥚 => 🍳
---------------------------------------------
// 받아오는 것이 하나면 아래처럼 간단하게 표현할 수 있다
getHen()
  .then(getEgg)
  .then(cook)
  .then(console.log);

• 오류가 있을 때

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('🐓'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(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)
  .catch(console.log);
----------------------
//🥖 => 🍳 (에러 빵꾸 처리!)
// 만약 빵꾸처리를 하지 않았다면? 
// Error: error! 🐓 => 🥚