10.7 마이크로태스크

[lim-jiwoo]

unhandledrejection이 발생하는 원리를 이해하지 못함...

마이크로태스크 큐에 있는 작업 모두가 완료되었을 때 생성됩니다. 엔진은 프라미스들을 검사하고 이 중 하나라도 ‘거부(rejected)’ 상태이면 unhandledrejection 핸들러를 트리거 하죠. 라는데,

1. 마이크로태스크 큐에 있던 작업 모두가 완료되었다는 것은 마이크로태스크에 남아있는 프라미스가 없다는 것 아닌가? 무슨 프라미스를 검사하는 거지?
2. 이후에 캐치문이 있다고 해도, reject하는 핸들러는 마이크로태스크 큐를 통과하지 않나? 그 때도 거부 상태일텐데 unhandledrejection 핸들러가 트리거되지 않는 이유는?

[lim-jiwoo]

댓글 참고: (아직 완전히 이해 못함 ㅠ)

unhandledrejection handler and promise catch inside setTimeout both are macrotask. But, since setTimeout task has a timeout of 1000ms, this task will be added to macrotask queue after 1000 ms.

So, execution sequence will be:

1. Add a promise microtask for 1st line 'Promise.reject(new Error("Promise Failed!"));'
2. Schedule a macrotask due to setTimeout, this task will be added to macrotask queue after 1000ms. Till then it has to wait with scheduler for the specified time.
3. Add a macrotask for unhandledrejection handler callback.
4. Scripts has ends so JS engine can look into microtask queue now.
5. Promise is rejected, with this microtask queue is empty.
6. So, with no script running and nothing in microtask queue, JS engine can look into macrotask queue now.
7. In macrotask queue, we have only unhandledrejection handler callback till now. So, unhandledrejection handler callback will run and macrotask queue is also empty now.
   .....Zzzz... wait for around 999ms
8. Scheduler is done with waiting,so we have another macrotask now.
9. This macrotask will push promise.catch now to a microtask queue. And, handler is completed so macrotask queue is empty.
10. Microtask for promise.catch is run now.

[lim-jiwoo]

댓글 참고:

마이크로태스크와 매크로태스크, 이벤트 루프를 잘 설명하는 자료가 있어 소개합니다.

마지막 예제에서 많은 분들이 헷갈리실거라 생각됩니다.

다음의 코드를 살펴보면 프라미스가 즉시 거부 처리 됩니다.

그리고 setTimeout 을 이용하여 에러를 catch 합니다.

그런데 여기서 setTimeout은 앞의 과정에서도 알아봤듯이

스케줄링을 '기록' 하는 것이지 즉시 실행시키는 것이 아닙니다.

즉 '기록' 하고 앞에서 에러가 발생되었기 때문에 바로 window 전역객체는 unhandledrejection 이벤트 발생을 감지합니다.

그렇기 때문에 unhandledrejection 이벤트가 먼저 발생하는 것입니다.

해당 부분은 이벤트 루프와 마이크로 태스크, 콜 스택, 콜백 큐, webAPIs 등등을 알아야 이해가 가능한 부분이라 생각됩니다.

그렇기에 코어 쪽 스크립트에서 다룰 줄 알았는데 아마 브라우저 API와 연관되어 있어 뒤쪽 과정에 배치 된 것 같습니다.

let promise = Promise.reject(new Error("프라미스 실패!"));
setTimeout(() => promise.catch(err => alert('잡았다!')), 1000);

// Error: 프라미스 실패!
window.addEventListener('unhandledrejection', event => alert(event.reason));