JavaScript 동기/비동기 (Promise)

사전예약판매중인 강의가 있다고 생각을 해보자. 그리고 강의를 수강할 수 있게되면 문자를 보낸다고 해보자

철수는 강의 오픈보다 먼저 강의를 신청했고 강의가 시작하는 날 맞추어 문자를 받는다.
영희는 강의 오픈 후에 수강신청을 하여 즉시 문자를 받는다.

---

Producer

When new Promise is created, the executor runs automatically.

Promise 안에서 성공적적으로 수행했다면 resolve 함수로 반환하고, 실패했다면 reject 함수로 반환한다.

const promise = new Promise((resolve, reject) => {
  //doing some heavy work. (network, read files)
  console.log("doing something"); // 객체 만들어지자마자 실행됨
  setTimeout(() => {
    resolve("2je0");
  }, 2000);
});

Consumer

promise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("finally"); // 무조건 수행
  });

---

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

const getA = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("A");
    }, 1000);
  });
};
const getB = (a) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${a} => B`);
    }, 1000);
  });
};
const getC = (b) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${b} => C`);
    }, 1000);
  });
};

getA()
  .then((ele) => getB(ele))
  .then((ele) => getC(ele))
  .then((ele) => console.log(ele));

Tip

인자로 들어가는게 같으면 다음처럼도 쓸 수 있다.
포맷팅이 안맞으면 주석을 활용한다.

getA() //
  .then(getB)
  .then(getC)
  .then(console.log);

Error Handling

중간에 reject 로 에러가 생긴다면 에러가 생기는 부분에서 catch를 이용하여 에러를 핸들링 할 수 있다.

const getA = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("A");
    }, 1000);
  });
};
const getB = (a) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error(`${a} => B`));
    }, 1000);
  });
};
const getC = (b) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${b} => C`);
    }, 1000);
  });
};

getA()
  .then((ele) => getB(ele))
  .catch(() => {
    return "D";
  })
  .then((ele) => getC(ele))
  .then((ele) => console.log(ele))
  .catch(console.log);

---