자바스크립트 프로미스 | JavaScript Promise

출처: https://youtu.be/JB_yU6Oe2eE (엘리의 드림코딩)

Promise is a Javascript Object for asynchronous operation.
Promise는 자바스크립트 안에 내장된 object.
비동기적인 것을 수행할 때 콜백 함수 대신에 유용하게 사용할 수 있다.

Promise에서 중요한 두 가지

• State
  프로세스가 기능 수행중인지 성공했는지 실패했는지 상태를 아는 것
  pending -> fulfilled or rejected

• Producer vs Consumer
  데이터를 제공하는 API와 제공된 데이터를 사용하는 API의 차이점 알기
  
  

1. Producer
   promise는 클래스이기 때문에 new로 object를 생성할 수 있다.
   promise는 executor라는 콜백함수를 전달해줘야 하는데,
   executor는 두가지 콜백함수 resolve와 reject를 받는다.

• resolve: 기능을 정상적으로 수행해서 데이터를 전달
• reject: 기능을 수행하다가 문제가 생기면 호출
  새로운 promise가 만들어질 때 executor라는 함수가 바로 실행된다.(주의!)

const promise = new Promise((resolve, reject) => {
  // doing some heavy word (network, read files)
  console.log("doing someting...");
  setTimeout(() => {
    // 성공적으로 기능을 수행한다면 resolve라는 콜백함수 실행
    // 성공적으로 받아오거나 읽어온 데이터를 resolve를 통해 전달한다.
    resolve("ellie");

    // 에러가 났을 때는 reject를 사용한다.
    // 보통 Error라는 object를 통해 메세지를 전달한다.
    // Error라는 클래스는 자바스크립트에서 제공하는 object 중 하나
    // Error object에는 어떤 이유로 에러가 났는지 잘 명시해서 작성해야 한다.
    reject(new Error("no network"));
  }, 2000);
});

2. Consumer
   then, catch, finally 를 이용해서 데이터를 받아온다.

promise
  .then((value) => {
    // promise가 잘 실행되면 then을 이용해 resolve 또는 Error로 전달한 값을 받아와서
    // 원하는 기능을 실행하는 콜백함수를 전달
    console.log(value);
    // ellie가 출력된다. resolve에 들어간 ellie라는 값이 value로 전달된다.
  })
  .catch((error) => {
    // 에러가 발생했을 때 핸들링 하려면 catch를 사용한다.
    // 에러가 발생하면 어떻게 처리할 것인지 콜백함수를 등록한다.
    // then을 호출하게 되면 then이 같은 promise를 return하므로
    // return된 promise의 catch를 다시 호출할 수 있는 것이다. -> 체이닝
    console.log(error);
  })
  .finally(() => {
    console.log("finally");
    // finally는 promise의 성공과 실패에 상관없이 호출되어진다.
  });

3. Promise chaning

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

// Promise는 아래처럼 연결해서 사용할 수 있다.
fetchNumber
  .then((num) => num * 2)
  .then((num) => num * 3)
  .then((num) => {
    // then에서는 값을 전달해도 되고 promise를 전달해도 된다.
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(num - 1), 1000);
    });
  })
  .then((num) => console.log(num));

4. Error Handling

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

getHen()
  // .then((hen) => getEgg(hen))
  // 콜백함수를 전달할 때 받아오는 한가지 value를 바로 다른 함수로 호출하는 경우에는
  // value 생략이 가능해서 아래처럼 쓸 수 있다.
  .then(getEgg)
  .catch((error) => {
    return "🥖";
  })
  // .then((egg) => cook(egg)) 아래처럼 쓸 수 있다.
  .then(cook)
  // .then((meal) => console.log(meal));
  .then(console.log);