You can understand async/await in JavaScript if you have a morning routine before going to work or school.

After spending some time with promises in JavaScript, you’ll soon realise that, like callbacks, promises can quickly become an unruly mess!

Let’s assume you have five different functions that you want to run in a row and you’re trying to use promises.

This code will operate as long as there are 5 functions called promise1-5. When you go back and read it later, though, it provides very little insight into what is really going on.

Here’s where async/await comes in handy. The async/await pattern does the same thing as a sequence of commitments in terms of features. But it’s a little easier to read and provides more information about what’s going on within the async feature.

In the real world, an example of async/await is

To demonstrate the use of async/await, consider the following scenario. Assume you have a morning routine consisting of five activities:

1. 1. Take a bath.
   2. Breakfast should be consumed.
   3. Put on some clothes.
   4. Put on some lipstick.
   5. Look into the news.

All five of these tasks must be completed before you can go to work. However, there are essentially two ways to approach these activities:

1. 1. I’m going to do each one in order.
   2. Getting through all five as quickly as possible, regardless of the order.

Perhaps you (or someone you know) prefers the second approach.

However, in real life, this will almost certainly be catastrophic. What if you attempted to dress before you had finished showering? What would be the point of that?

As a result, it’s probably better if we use code to reflect this situation, we make sure that all five events take place in the correct order. We Might do this with commitments, but the async/await pattern could be more effective at demonstrating the reasoning.

How to Make a “Async” Function?

The async keyword can be used to declare a function. The await keyword can then be used within an async function to wait for a promise to be resolved before proceeding to the next line of code.

You may specifically set the order using the combination of these two keywords.

Please note that this has no impact on JavaScript’s asynchronous and multi-threaded design. Only the order of promises inside a single async function is affected.

As an example of an async operation, consider the following:

We’ve now declared a morningRoutine async function with a single argument called startTime. This will be used in the role to decide whether or not we will be late for work (but that part comes later),

Now it’s time to start incorporating our morning routine. Let’s build a shower feature with just one parameter. And, before proceeding, the rest of the promises can wait for that pledge to settle.

The startTime argument will now be passed to the shower feature. We won’t move on to the next statement until the pledge has been fulfilled and a value has been returned and saved in step1FinishTime.

Let’s now transfer the value from step1finishTime to the following pledge. Here’s an example of what it feels like:

This is how the code looks in diagram form:

Then we may repeat this pattern for each of the five promises, as follows:

After each commitment resolves, the morningRoutine function returns the value stored in step5FinishTime.

  In the Async Function, using “Try” and “Catch”

The preceding example assumes that each promise is resolved, allowing the function to proceed.

But what if one of the assurances fails to deliver? Let’s say you run out of breakfast food and spend too much time in the bathroom, and you need to email your boss to let them know you’ll be late.

To manage circumstances where any of the guarantees fails to address, you can use “try” and “catch” statements for the entire code block.

Our “catch” comment should give a message to our supervisor in this situation.

This is how it appears in code:

Here’s how the rationale looks in diagram form when all promises are fulfilled:

In diagram form, here’s what the rationale looks like when one of the commitments throws an error:

Are you looking for JavaScript Developer?