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

This article will explain in detail what is the use of async and await for you. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Let's look at a simple scenario:

/ / suppose there are four asynchronous methods to be called sequentially

New Promise (function (resolve) {

AjaxA ("xxxx", () = > {resolve ();})

}) .then (function () {

Return new Promise (function (resolve) {

AjaxB ("xxxx", () = > {resolve ();})

})

}) .then (function () {

Return new Promise (function (resolve) {

AjaxC ("xxxx", () = > {resolve ();})

})

}) .then (function () {

AjaxD ("xxxx")

});

The grammar is not concise enough, we can modify it a little bit.

/ / transform the request into a general function

Function request (options) {

/ /.

Return new Promise (....); / / execute the request using Promise and return the Promise object

}

/ / so we can send the request.

Request ("http://xxxxxx")"

.then ((data) = > {

/ / deal with data

})

And then we'll reinvent the code at the beginning.

Request ("ajaxA")

.then ((data) = > {

/ / deal with data

Return request ("ajaxB")

})

.then ((data) = > {

/ / deal with data

Return request ("ajaxC")

})

.then ((data) = > {

/ / deal with data

Return request ("ajaxD")

})

It's a lot better than before, but it still doesn't look concise enough.

If only I could use Promise as I do with synchronous code

So async\ await appeared.

Async function load () {

Await request ("ajaxA")

Await request ("ajaxB")

Await request ("ajaxC")

Await request ("ajaxD")

}

The requirement for using the await keyword is very simple, and the function called later returns a Promise object.

The function load () is no longer an ordinary function, it has a "blocking" operation like await.

Therefore, the async keyword cannot be omitted here.

So now, this code has become extraordinarily elegant.

The writing order of the code

The reading order of the code

The execution order of the code

It's all in the habit of synchronization.

Isn't it convenient?

So far you have learned the basic ways to use async and await.

Let's briefly explain its workflow.

/ / the word wait means to wait

Async function load () {

Await request ("ajaxA"); / / so this is waiting for the completion of the ajaxA request.

Await request ("ajaxB")

Await request ("ajaxC")

Await request ("ajaxD")

}

What if the latter request requires the result of the previous request?

The traditional way of writing is like this.

Request ("ajaxA")

.then ((data1) = > {

Return request ("ajaxB", data1)

})

.then ((data2) = > {

Return request ("ajaxC", data2)

})

.then ((data3) = > {

Return request ("ajaxD", data3)

})

And using async/await is like this.

Async function load () {

Let data1 = await request ("ajaxA")

Let data2 = await request ("ajaxB", data1)

Let data3 = await request ("ajaxC", data2)

Let data4 = await request ("ajaxD", data3)

/ / await not only waits for Promise to complete, but also gets the parameters of the resolve method.

}

Note that when a function is modified by async, its return value is automatically processed as a Promise object.

About exception handling

Async function load () {

/ / you can use try-catch to process the failed request.

Try {

Let data1 = await request ("ajaxA")

Let data2 = await request ("ajaxB", data1)

Let data3 = await request ("ajaxC", data2)

} catch (e) {

/ /.

}

}

This is the end of this article on "what is the use of async and await". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please 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.