7. Promise 배우기

말 그대로 약속하는 함수이다. promise안에 있는 어떤 조건이 완료가 되면 그 안에 있는 데이터를 return하겠다고 약속하는 것이다. Promise 함수안에는 resolve,reject를 인자로 하는 execute함수가 반드시 들어가야한다. 그래서 resolve함수에 문제가 없으면 resolve 안에 들어간 인자를 return 한다. 인간의 성장을 표현하는 과정을 promise로 나타내 보았다.

const baby = () =>
  new Promise((resolve, reject) => {
    // 서버에서 데이터를 받아오는데 시간이 걸리므로 setTimeout을 통해 흉내내보았다.
    setTimeout(() => resolve("👶"), 1000);
  });

const child = (baby) =>
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`error: ${baby} => 👦`)), 1000);
  });

const adult = (child) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${child} => 👨`), 1000);
  });

baby()
  .then(baby => child(baby))
  .then(child => adult(child))
  .then(adult => console.log(adult));
  .finally(() => console.log('we all growing. so dont forget to eat kimchi'));

// 근데 then에 들어가는 함수의 parameter와 함수안에 들어가는 인자가 같을때는 생략하고 코드를 작성해도 문제없다.
baby() //
  .then(child)
  .catch((error) => {
    return `🎅`;
  })
  .then(adult)
  .then(console.log)
  .finally(() => console.log("we all growing. so dont forget to eat kimchi"));

//🎅 => 👨
// we all growing. so dont forget to eat kimchi

Promise 함수를 만들고 then을 통해 return값을 받은다음 그 값을 다른 함수에다가 pass할 수 있다. 그러나 child 에서 일부러 reject되도록 해보았다. 그때는 .catch 라는 메소드를 통해 에러를 말그대로 잡아서 처리할 수 있다. 그래서 에러가 생기면 산타할아버지를 return하도록 했다. 그리고 .finally 메소드를 통해 코드 마지막에 무조건 발생하는 기능을 추가해보았다.

이런식으로 promise함수안에서 문제가 없으면 resolve안에 있는걸 넘겨주도록 약속한다. 만약 문제가 있으면 reject안에 있는걸 넘겨주도록 하는것이다. 그리고 then을 통해 계속해서 앞의 promise를 넘겨받고 갱신한다. 이어달리기 처럼 말이다. 그럼 promise를 통해 콜백지옥을 선사했던 코드를 구해주자.