Скачать или смотреть Understanding the async/await Order in JavaScript: A Deep Dive into Promises

Explore the intricacies of JavaScript's asynchronous behavior and how `async/await` works with promises, timers, and event loops.
---
This video is based on the question https://stackoverflow.com/q/70557466/ asked by the user 'John Doe' ( https://stackoverflow.com/u/11740774/ ) and on the answer https://stackoverflow.com/a/70557494/ provided by the user 'T.J. Crowder' ( https://stackoverflow.com/u/157247/ ) 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: Multiple async/await event loop order

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 the async/await Order in JavaScript

As you dive deeper into the world of asynchronous JavaScript, you might encounter unexpected behavior from async/await, particularly when working with promises. In this guide, we'll unpack a real-life scenario involving JavaScript promises, async/await, and the event loop to clarify these nuances.

The Problem: Unexpected Timing with Promises

Consider the following code snippet that uses async/await with promises:

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

In this code, you wait for 3 seconds, then log 1, wait for 1 second, and log 2. This behavior is as expected. However, when you change the definition of these promises into the following method:

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

And call them like this:

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

You get a different output where console.log(3) executes immediately, bypassing the 3-second delay.

Why does this happen?

The Explanation: Microtasks and Macrotasks

The root of this unexpected behavior lies in the understanding of how the JavaScript event loop processes tasks.

Promises and Timing

Immediate Execution:

The Promise constructor executes its executor function immediately and synchronously. Thus, when you create promise3 and promise4, the timers for both start right away, without any delay.

Awaiting Promises:

With await, you're actually asking JavaScript to pause execution until the promise is fulfilled.

In the first case, the timer for promise2 only begins after the fulfillment of promise1 due to the use of a function that you call and await.

Impact on Event Loop

When you use await, you introduce handling of microtasks, which are scheduled to run after the current task completes.

In contrast, timers (like those created with setTimeout) are treated as macrotasks, leading to variations in how they are executed.

Demonstration with Console Logs

To better understand the timing, we can add logging to illustrate how the event loop behaves:

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

Output:

The output of the above code will illustrate the sequence of events:

You will notice timestamps that indicate when each part of the execution starts and resolves, shedding light on whether timers overlap.

Key Takeaway

The behavior you observed arises from when timers are initiated (upon promise creation) and when tasks are scheduled in the event loop. Understanding this timing is critical for mastering asynchronous JavaScript.

Conclusion

The interplay of promises with async/await can be quite complex, but breaking down the concepts of microtasks and macrotasks makes it clearer. By realizing that the Promise constructor runs immediately, you can anticipate and control your asynchronous flow in JavaScript better.

Next time you're working with asynchronous functions, keep these principles in mind to guide your understanding of event loops, timers, and promises.