Javascript_ Promise()

Javascript_ Promise()

1. Producer

// !!when new Promise is created, the executor runs automatically!!
// doing some heavy work! (network, read files)
// promise 가 만들어지는 순간 resolve가 바로 실행됨. (비동기)
const promise = new Promise((resolve, reject) => {
  console.log("doing something...");
  setTimeout(() => {
    resolve("kim");
    reject(new Error("no network")); 
//reject는 promise실패 시 불러오는 함수. 보통 Error라는 오브젝트를 통해 값을 전달함
  }, 1000);
});

2. Consumers: then, catch, finally

promise가 잘 불러와 진다면 then을 실행. then((value) => {}) 여기서 value는 promise resolve 인자
promise가 안 불러와 진다면 catch 실행. catch((error) =< {}) error는 위에서 만든 new Error
.finally 는 성공하든 실패하든 마지막에 무조건 진행됨.
.then().catch() 의 구조는 배열의 .array.array2 와 같음

promise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("finally");
  });

3. Promise chaining
   -> .then으로 묶어 순차적 사용 가능
   -> array 순차적으로 실행하는 느낌

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

4 Error Handling
-> 한번보고 두번보고 세번보자

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`닭`), 1000);
  });


const getEgg = (hen) =>
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`${hen}`)), 1000);
  }); 
// 해당 부분에서 오류 발생했다고 가정..

const cook = (egg) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg}`), 1000);
  });

getHen()
  .then((hen) => getEgg(hen)) //
  .then((egg) => cook(egg))
  .then((meal) => console.log(meal))
  .catch(console.log); 
// .catch를 마지막에 붙이면 중간에 발생한 오류의 정보를 아래로 보내서 오류가 어디서 발생했는지 알 수 있음

// 위랑 아래랑 같은 코드임.
// .then(getEgg) 랑 .then((hen) => getEgg(hen)) 받아오는 value를 다른 함수로 바로 호출하는 경우에는 생략 가능 (value 한개일때)

 getHen()
	.then(getEgg)
    .catch((error) => {  //이렇게 중간에 .catch를 넣어주고 return value를 입력해주면 해당 위치에서 error가 나면 원래 값이 아닌 return 값을 전달해줌.
     return `오류가 났네..`; //오류가 났네 라는 값을 대신 전달해줘서 잘 마무리
  })
    .then(cook)
	.then(console.log)