프로미스 함수

어떻게 하면 깔끔하게 비동기처리 코드를 작성할 수 있을까?

프로미스 함수는,
기능이 정상적으로 작동하면 성공 메세지를 전달하고 다음 함수를 실행한다.

promise is a JS object for asynchronous operation.
자바스크립트에 내장된 오브젝트로, 비동기적인 수행을 위한 함수

알아야할 점

1.state상태

무거운 기능을 수행하고 있는지, 기능 수행을 완료했는지 등 상태를 이해하는 것이 중요

2.producer 와 consumer의 차이점

제공된 데이터와 이 데이터를 사용하는 사람의 차이점을 이해하는 것이 중요

// state : pending=>fulfilled or rejected
// producer vs consumer

1.producer

// when new Promise is created, the excuter runs automatically.
// 프로미스 함수를 만드는 순간 executor함수는 바로 실행된다.
// 네트워크 통신을 버튼클릭 등 사용자가 요청한 시에만 이루어지게 만드려면 불필요하게 통신이 될 수 있다./
const promise = new Promise((resolve, reject) => {
  // doing some heavy work(network,read files)
  console.log("doing something....");
  setTimeout(() => {
    resolve("ellie");
    // reject(new error("no network"));
  }, 2000);
});

2.consumers: then,catch,finally

promise
  .then((value) => {
    console.log(value);
  })
  //   promise를 리턴하므로 리턴된 프로미스의 catch를 다시 호출할 수 있다.
  .catch((error) => {
    console.log(error);
  })

  .finally(() => {
    console.log("fnally");
  });
//   성공했건 아니건 무조건 마지막에 호출

3.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));
//   then은 값 뿐만아니라 promise를 전달 할 수 있다.
// 여러개의 비동기를 묶어서 처리할 수도 있음

// 오류 처리하기

참고사이트:
https://www.youtube.com/watch?v=fU25vI0EOOk