[JS] 프로미스 Promise(1) resolve, reject, 프로미스 체이닝

 

 

resolve : 성공 시 실행 함수

reject : 실패 시 실행 함수

 

❗️ 이렇게 어떤 일이 완료된 후 실행되는 함수를 callback 함수라 한다.

// 새로운 Promise가 만들어질 때는 , executor(내가 전달한 콜백 함수)가 바로 실행된다
const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  // 네트워크를 이용하거나 파일을 읽어오는 활동을 할 땐 시간이 오래 걸리니
  // 실행이 완료된 후 넘어가는 동기적이 아니라
  // 실행이 완료되지 않아도 다음으로 넘어가게 비동기적 함수를 이용해야 한다.
  console.log(`doing someting...`);
  setTimeout(() => {
    resolve(`aotoyae`);
    // reject(new Error(`no network`));
  }, 2000);
});

promise
  .then((value) => {
    console.log(value); // aotoyae
  })
  .catch((error) => {
    console.log(error); // Error: no network
  })
  .finally(() => {
    console.log(`finally`); // 성공하던 실패하던 마지막에 실행
  });

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

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

// Error Handling
const getTree = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`🌲`), 1000);
  });
const getLight = (tree) =>
  new Promise((resolve, reject) => {
    // setTimeout(() => resolve(`${tree} + 💡`), 1000);
    setTimeout(() => reject(new Error(`error! ${tree} + 💡`)), 1000);
  });
const onPower = (light) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${light} => 🎄`), 1000);
  });

getTree()
  //   .then((tree) => getLight(tree))
  //   .then((light) => onPower(light))
  //   .then((chirstmasTree) => console.log(chirstmasTree));
  // 콜백함수를 전달할 때 value를 한가지만 받아서 전달한다면 value 생략 가능!
  .then(getLight)
  .catch((error) => {
    return `🎁`;
  }) // getLight에서 error 발생 시 다른 값을 return
  .then(onPower)
  .then(console.log)
  .catch(console.log);

// getTree().then(getLight).then(onPower).then(console.log);
// 가독성이 좋지 않으니 아래처럼 주석 표시를 붙이면 정렬된다.
// getTree() //
//   .then(getLight)
//   .then(onPower)
//   .then(console.log);

 

 

 

🔗 https://youtu.be/JB_yU6Oe2eE?si=87dYAEBJRKIuICbA