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

Editor to share with you how to use async and await in JS, 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!

1. Async

Async creates an asynchronous function to define a block of code in which to run asynchronous code

How to become an asynchronous function? Start with the keyword async, which can be placed in front of a function

Async function f () {return 1;} f (). Then (alert); / / 1 / / the result is the same as async function f () {return Promise.resolve (1);} f (). Then (alert); / / 1 / / you can also use the arrow function let hello = async () = > {return "1"}; hello (). Then ((value) = > console.log (value)) / / the return value can also be simplified to this hello (). Then (console.log)

One of the characteristics of asynchronous functions is that the return value of the function is guaranteed to be promise.

By adding the async keyword to the function declaration, you can tell them that promise is returned instead of a direct return value. In addition, it avoids any potential overhead of synchronization functions to support the use of await.

2. Await:

Await works only in asynchronous functions. It can be placed anywhere asynchronously, and the keyword await tells the JavaScript engine to wait until promise finishes and returns the result. While waiting for promise, other code that is waiting for execution will have a chance to execute.

You can use await, including the Web API function, when calling any function that returns Promise.

Async function f () {let promise = new Promise ((resolve, reject) = > {setTimeout (() = > resolve ("Dong!"), 1000)}); let result = await promise; / / waits for execution until promise resolve finishes executing alert (result); / / "Dong!"} f (); / / takes result as a result to continue execution. So the above code says "Dong!" after 1 second.

Note: await actually pauses the execution of the function until the promise state becomes complete, and then continues execution as a result of promise. This behavior does not consume any CPU resources, because the JavaScript engine can handle other tasks at the same time: executing other scripts, handling events, and so on.

III. Comprehensive application

With async/await, you get rid of the blocks of .then () code everywhere, because await will wait.

Async function A () {let response = await fetch ('c.jpg'); let myBlob = await response.blob (); let objectURL = URL.createObjectURL (myBlob); let image = document.createElement (' img'); image.src = objectURL; document.body.appendChild (image);} A (). Catch (e = > {console.log ('question:' + e.message);})

The code is encapsulated with fewer .then () blocks, and it looks a lot like synchronous code, so it's very intuitive. It's great to use it this way!

The above is all the content of the article "how to use async and await in JS". 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.