[JS] How Promise works

이 자료는 아래의 블로그에서 가져온 정보입니다.
https://lydiahallie.framer.website/blog/promise-execution

 

 

 

Promise의 Process

JavaScript Visualized

a new promis object is created in memory.
the promis object contains some internal slots(

[[PromiseState]],
[[PrmiseResult]],
[[PromiseFulfillReactions]],
[[PromiseRejectReactions]],
[[PromiseIsHandled]]

 

 

[[PromiseFulfillReactions]], [[PromiseRejectReactions]]

These fields contain something called Promise reaction records. we can create a promise reaction record by chaining a "then" or "a catch method" to the promise.

This reaction record contains a [[Handler]]. This has got some codes. That code is that call back that we passed to "then"

 

 

new Promise((resolve, reject) => {
  resolve("Done!")
})
  .then(result => console.log(result))

1. [[PromiseState]] : "penddidng"  within Promise object .
2. resolve("Done!") in new Promise
3. resolve("Done!") is added to the call stack
4. [[PromiseState]] : "fulfilled"  within Promise object.
5. [[PromiseResult]] is set to the value("Done!")
6. The Promise object pass to resolve and the Promise reaction record Handler receives that promise result.
7. Handler is added to the Microtask Queue(async).
8. Whenever the call stack is empty, the Evetn Loop first checks in the Microtask Queue.
   1. The Event Loop priority, 1. Call Stack 2. MicroTask Queue 3. Task Queue
9. Whenever the Microtask Queue is empty, the Event Loop goes to the Task Queue.

 

 

Whenever they return a data we can use their callback function to either resolve with the data that Promise object returned  or reject if an error occurred

 

'setTimeout' with 'then' Handler witin Promise Object

1. The new Promise Constructor is added to the callStack.
2. Create the Promise Object
3. the executor function is called and on the first line we have got a setTimeout.
4. The setTimeout is adde to the CallStack.
5. The setTimeout is responsible for schedulling that timer at Web APIs.

 
6. On the next line we have the then Handler.
7. the then is added to the callStack.
8. Create PromiseRaction within [[PromiseFullfillReactions]].
9. the then is popped off the CallStack(even if the resolve is removed, the result is able to access to that).
10. the 100 milliseconds are up before the Callback that we passed to setTimeout is added to the Task Queue.

10. There is nothing on the CallStack anymore(script is finished) so 'that() => resolve("Done!") from setTimeout' can go from the Task Queue to the CallStack.
11. This Calls result so this changes [[the PromiseState]] to fulfilled.
12. [[The PromiseResult]] to string done.
13. PromiseReaction schedules that Handler to the Microtask Queue.

14. The result is done, popped off the Call Stack.
15. There is again nothing on the Call Stack.
16. The Event Loop first check the microtask Queue.
17. The handler is waiting. It's added to the Call Stack.
18. The 'then' console.log, the promosed result which is the string 'done'.

 

 

요약

1. Promise object는 스크립트를 동기화 한다.
2. Handler의 결과 값는 chain을 통해서 다음 then으로 전달 가능하다.