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

This article introduces how to understand the async and await of js. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

One: Overview

The development of js asynchronism has experienced callback, event, Promise, generator, async+await, generally speaking, it has evolved many versions. Js is single-threaded. In order to support the event loop introduced asynchronously, it is quite deep. I recently encountered a problem with js. Write a test and record it.

First, we use the async keyword, put it before the function declaration, and make it async function. An asynchronous function is a function that knows how to call asynchronous code using the await keyword.

Await works only in asynchronous functions. It can be placed before any asynchronous, promise-based function. It pauses the code on this line until the promise is complete, and then returns the result value. While pausing, other code that is waiting for execution will have a chance to execute. The above is defined by MDN, it looks a little confused, let's try a piece of code.

Second: debugging

/ / this sleep returns a Promise object const sleep = function (time) {console.log (Date.parse (new Date () return new Promise (function (resolve, reject) {setTimeout (function ()) {resolve ('ok'))

}, time);}); / / this is the synchronously executed code function sleep_sync (numberMillis) {let now = new Date (); const exitTime = now.getTime () + numberMillis; while (true) {now = new Date (); if (now.getTime () > exitTime) return }} / / Code modified with async async function test () {console.log ("call test") console.log ("synchronous execution 5s start") sleep_sync (5000) console.log ("synchronous execution 5s end") console.log ("Asynchronous execution starts in 10 seconds") await sleep (10000) console.log ("Asynchronous execution ends in 10 seconds") console.log ("synchronous execution ends in 10 seconds") Asynchronous execution starts in 5 seconds) await sleep (5000) console.log ("asynchronous execution ends in 5 seconds") console.log ("about to execute return") return "hello test"} / / call async function result_test = test () console.log ("main process logic") result_test.then ((r) = > console.log (r)) console.log ("main process logic 1")

Execution result

Call test synchronous execution 5s start-execution 5s-synchronous execution 5s end asynchronous execution 10 seconds start 1595845827000 main process logic main process logic 1-execution about 10s-asynchronous execution ends 5 seconds start 1595846947000- -5s executed.-Asynchronous execution ends in 5 seconds. Returnhello test will be executed.

Analyze it (welcome to leave a message if there is an error):

The first line of code executed

Result_test = test ()

Call the test function and enter the test function. Test is modified by async. In this function, the code is divided into two types, synchronous code and asynchronous code. Synchronous code must be executed regardless of the async keyword, so sleep_sync synchronized execution for 5s, including console.log is synchronous code. Corresponding to the above output

This is followed by the following code

Await sleep (10000)

First, take a look at the sleep function. Print the current time first, and then create a Promise object. The Promise object will be executed immediately after it is created. After that, both await and return will cause the function modified by async to return, so it's time for the main process. When the main process has finished printing "main process Logic 1", there is no code to execute.

Then it comes to the "asynchronous execution ends in 10 seconds", which is not necessarily 10s. Js is single-threaded. If the process is blocked seriously, it may be more than 10s.

In async, await is executed serially, so after 10s, start with 5s, and then return.

The values returned by the async function are all Promise, so you can get the values through then.

About js async and await how to understand to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.