Скачать или смотреть Understanding Promise Order: The Micro Task Queue in JavaScript

Dive into the inner workings of JavaScript's promise handling, focusing on output order and the micro task queue with clear examples.
---
This video is based on the question https://stackoverflow.com/q/68733816/ asked by the user 'Sean Liu' ( https://stackoverflow.com/u/8850211/ ) and on the answer https://stackoverflow.com/a/68733931/ provided by the user 'Samathingamajig' ( https://stackoverflow.com/u/12101554/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: output order involve promise, micro task queue in js

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Promise Order: The Micro Task Queue in JavaScript

JavaScript has a unique way of handling asynchronous operations, particularly through the use of promises. However, many developers encounter confusion when trying to grasp how JavaScript executes these promises, especially regarding the order of output. In this guide, we will tackle a specific question regarding the output order involved in a promise and the micro task queue.

The Problem: Confusing Output Order

Imagine you're executing the following piece of JavaScript code involving promises:

[[See Video to Reveal this Text or Code Snippet]]

When you run this code, you see this output:

[[See Video to Reveal this Text or Code Snippet]]

The confusion typically arises around the last outputs: then21, then12, and then23. Why do they appear in this order? What dictates when each then is executed?

The Solution: Understanding Promise Chaining

To achieve the expected output, you need to appropriately return the promise created inside the first .then(). Here's an updated version of the original code:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown of the Changes

Returning Promises:

The key change here is adding the return statement before the second new Promise. By returning the promise, you're telling JavaScript to wait for this promise to fulfill before continuing to the next then() in the chain.

Understanding the Micro Task Queue:

JavaScript utilizes a micro task queue for promises. Each then attached to a promise creates a micro task that must complete before any new macro tasks (like rendering or handling events) can occur.

When the promise resolves, the code in the order they were defined will be executed: then11, then21, followed by then23.

The Final Output Explained

With the corrected version, the output now correctly follows this order:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

Understanding how promises and the micro task queue work together is crucial for mastering JavaScript's asynchronous behavior. Always remember to return promises in your promise chains to ensure proper order of execution. By mastering this concept, you’ll not only enhance your coding skills but also make your JavaScript applications even more efficient.

With this understanding, you can now predict the output of your promise chains with confidence. Happy coding!