Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use Async and Await in JavaScript, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

What is an asynchronous task?

Asynchronous tasks allow you to complete other tasks while asynchronous tasks are still trying to complete.

Here are some examples of daily asynchronous tasks 1:

You order food while driving, which initiates your food request (asynchronous task).

While preparing the food, you pull forward in the drive-through route (next task).

You don't have to wait for the food to be ready to move on.

You are waiting for food and your requirements are met in the pick-up window.

Example 2:

You mopped the floor in the kitchen.

While you are waiting for the kitchen floor to dry, you can vacuum the bedroom carpet.

The initial task is to clean your kitchen floor, and when the floor is dry, the task is done.

It's not efficient to stand in place and wait for the floor to dry, so you vacuum the bedroom floor while the kitchen floor is dry.

This is also how Javascript handles asynchronous functions.

Async/Await example-Baking Frozen Pizza

When you decide to bake pizza in the oven, the first step is to preheat the oven.

So you set the desired temperature and start preheating the oven.

When the oven is preheated, you take the frozen pizza out of the refrigerator, open the box, and put it on the pizza plate.

You still have time!

Maybe have a drink and watch some TV while waiting for the oven to beep.

Here is some code to simulate this example:

/ / This async function simulates the oven responseconst ovenReady = async () = > {return new Promise (resolve = > setTimeout () = > {resolve ('Beep! ));} / / Define preheatOven async functionconst preheatOven = async () = > {console.log ('Preheating oven.'); const response = await ovenReady (); console.log (response);} / / Define the other functionsconst getFrozenPizza = () = > console.log (' Getting pizza.'); const openFrozenPizza = () = > console.log ('Opening pizza.'); const getPizzaPan = () = > console.log (' Getting pan.'); const placeFrozenPizzaOnPan = () = > console.log ('Putting pizza on pan.') Const grabABeverage = () = > console.log ('Grabbing a beverage.'); const watchTV = () = > console.log (' Watching television.'); / / Now call the functionspreheatOven (); getFrozenPizza (); openFrozenPizza (); getPizzaPan (); placeFrozenPizzaOnPan (); grabABeverage (); watchTV (); / / Output sequence in console:Preheating oven.Getting pizza.Opening pizza.Getting pan.Putting pizza on pan.Grabbing a beverage.Watching television.Beep! Oven preheated!

The above process is the whole content of async and await.

Although our await asynchronous preheatOven is fully functional, we can perform similar tasks synchronous getFrozenPizza,openFrozenPizza,getPizzaPan,placeFrozenPizzaOnPan,grabABeverage or even watchTV.

We've been performing asynchronous tasks like this.

This is also the way Javascript ssync works.

Note that when our await receives a response from one async function, we need to call it in another async function. This is what we saw above when ovenReady called preheatOven.

Two key points to remember:

Javascript does not wait for preheatOven, a function like async, to complete before continuing with tasks like getFrozenPizza and openFrozenPizza.

Javascript uses await for an async function, such as ovenReady to finish and return data before continuing with the next task within the parent asynchronous function. We will see this when the console.log (response) statement ovenReady is not executed before the response is returned.

If the pizza example doesn't cut it.

I know that daily examples are helpful to some of us, but others may prefer real code.

Therefore, I will provide a less abstract example of asynchronous and waiting JavaScript below, which uses Fetch API to request data:

Example Async/Await code in JavaScript const getTheData = async () = > {try {const response = await fetch ('https://jsonplaceholder.typicode.com/users'); if (! response.ok) throw Error (); const data = await response.json (); / / do something with this data... Save to db, update the DOM, etc. Console.log (data); console.log ('You will see this last.')} catch (err) {console.error (err);}} getTheData (); console.log (' You will see this first.'); these are all the contents of the article "how to use Async and Await in JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.