Скачать или смотреть Mastering Asynchronous JavaScript: Using await to Make Async Code Look More Synchronous

Discover how to use `await` in JavaScript to control the flow of asynchronous code, making it appear sequential and easier to read.
---
This video is based on the question https://stackoverflow.com/q/62397143/ asked by the user 'Jimbo.Koen' ( https://stackoverflow.com/u/8902716/ ) and on the answer https://stackoverflow.com/a/62397249/ provided by the user 'Hemant Parashar' ( https://stackoverflow.com/u/6483121/ ) 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: JavaScript: Using await to make asnyc code look more synchronous

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.
---
Mastering Asynchronous JavaScript: Using await to Make Async Code Look More Synchronous

JavaScript has made asynchronous programming more accessible with the introduction of Promises and the async/await syntax. However, understanding how to use these tools effectively can still be challenging. Today, we will delve into a common issue faced when trying to use await with the setTimeout function, and explore how to achieve the desired sequential logging output.

The Challenge

Let's say you want to execute a series of console log statements sequentially after an asynchronous task (in this case, a timeout). You might run into an issue where your expected output is not matching the actual output. Consider the following JavaScript snippet:

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

Actual Output

When you run this code, you might see the output appear in the following order:

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

Expected Output

You might expect the output to appear like this:

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

This discrepancy can be confusing, especially if you're trying to make your asynchronous code look like it's executing in a more synchronous manner. Let's explore why this happens and how to fix it.

Understanding the Problem

The issue with the above code lies in the fact that setTimeout does not return a Promise. The await expression only works with Promises. When you call await setTimeout(...), JavaScript continues executing the code without waiting for the timeout to complete, leading to your unexpected output.

The Solution

To achieve the desired result, you need to create a new Promise that resolves after the setTimeout has completed. This way, the function execution will pause until the Promise resolves, effectively allowing you to control the flow of your code.

Here's how you can do it:

Revised Code Example

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

Explanation of Changes

Creating a New Promise: The key change is that we now wrap setTimeout in a new Promise:

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

Resolving the Promise: The resolve() function is called within the setTimeout callback to indicate that the asynchronous operation (the timeout) has completed.

New Expected Output

When you run the revised code, the output will correctly appear in the expected order:

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

Conclusion

By understanding how to use async/await effectively with Promises, you can manage the flow of asynchronous code in JavaScript more easily and make your code much more readable. This simple adjustment allows you to leverage the natural flow of async function execution while maintaining a synchronous-like appearance.

We hope this guide helps you confidently navigate the world of asynchronous programming in JavaScript! Feel free to reach out with any questions or further topics you would like uncovered in future posts.