[제로초] Promise와 동기/비동기 관련 짤막 키워드정리

https://sunshineyellow.tistory.com/64

위는 같이 볼만한 드림코딩 콜백지옥 탈출 Promise 기초 게시글.
제로초 인간JS엔진 보다가 추가적인 키워드 문장 정리가 필요해 작성한다.

---

Promise란?

실행은 됐는데!!! 결과값을 나중에 쓸 수 있다.

"실행은 됐는데"가 중요. 그래서 new Promise 안의 익명함수는 동기적으로 실행이 된다.
동기비동기 실행순서 관련해서 아래 코드가 중요하다. 기억해 놓자.

let a = 2;

const p = new Promise((resolve, reject) => {
  console.log('실행1');
  setTimeout(() => {
    a = 5;
    console.log('실행3', a);
    resolve(a);
  }, 0);
});
// ..딴짓중
console.log('실행2');
// ..딴짓중
p.then((result) => {
  console.log('실행4', result);
})

// 결과 :
// 실행1
// 실행2
// 실행3 5
// 실행4 5

위 코드에서 아래 new Promise 안의 익명함수가 바로 호출돼 동기적으로 실행이 되어버리기 때문에 실행1이 먼저 실행 된다. 

(resolve, reject) => {
  console.log('실행1');
  setTimeout(() => {
    a = 5;
    console.log('실행3', a);
    resolve(a);
  }, 0);
}

그리고나서 동기적인 anonymus에 있던 실행2 console.log가 실행되고,
그 후 백그라운드에 넘어간 setTimeout(0초가 지나면 실행)과 then(resolve되어야 실행)중 조건을 먼저 만족시킨 setTimeout 실행3이 실행된다.
그 후 그 안의 resolve가 된 then 실행 4가 실행된다.

---

+ 매크로태스크와 마이크로태스크

매크로태스크와 마이크로태스크는 Node.js에서 비동기 작업을 처리하는 방식을 설명하는 용어다. 동시실행이 가능한 비동기호출들이 들어가게 된다.

매크로태스크(Macro Task)

주로 타이머, 이벤트리스너, ajax 요청 등이 여기 들어간다.
매크로태스크는 Node.js의 이벤트 루프(event loop)에서 처리되며, 이러한 작업이 완료될 때까지 루프가 블로킹 상태에 있을 수 있다.

마이크로태스크(Micro Task)

주로 promise,process.nextTick 큐가 여기 들어간다.
마이크로태스크는 매크로태스크보다 우선 순위가 높다. 이벤트 루프의 다음 단계에 먼저 실행된다.

---

async 관련 주의사항

async로 안 감싸도 const result = await promise; 만으로 가능하게 바뀌었다.

async로 감싸서 내부에서 return한 건 꼭 따로 then으로 받아야 한다. 그리고 async로 감싼 await은 catch가 안돼서  try+catch를 따로 해줘야 함.

async function main() {
  try {
    const result = await promise;
    return result;
  } catch (error) {
    console.error(error);
  }
}
main().then((name) => ...);

---

allSettled

이제 all 말고 allSettled를 많이 쓴다. (뭐가 실패했는지 알 수 있고, 실패한 것만 필터링해서 다시 시도할 수 있기 때문.)

---

catch

catch는 앞의 모든 것에 대한 catch다. (p만 보는 catch가 아니라는 뜻)

p.then((result) => {
  console.log('result', result);
}).then(() => {
  // 에러났다
}.then(() => {
  
}.then(() => {
  
}.then(() => {
  
}.catch(() => { // 이 위까지의 모든 것에 대한 catch
  // 에러로 이동
}

그래서 catch를 사이사이 붙여도 좋다.

p.then((result) => {
  console.log('result', result);
}).then(() => {
  
}.catch(() => { // 이 위까지의 모든 것에 대한 catch
  
}.then(() => {
  
}.then(() => {
  
}.catch(() => { // 그전 catch 이후로부터 위까지의 모든 것에 대한 catch
  
}.then(() => {
  
}.catch(() => { // 그전 catch 이후로부터 위까지의 모든 것에 대한 catch
  
}

---

출처 : 제로초 유튜브 인간JS엔진되기