About the usage and understanding of asynchronous/waiting in JavaScript

Yesterday I updated the "Detailed Explanation of the Use of Promise in JavaScript". In fact, it means that the basic usage and your understanding of Promise are mentioned. There may be errors, and you are welcome to point them out. Today I will talk about "Usage and understanding of async/await in JavaScript"

Usage and understanding of asynchronous/waiting in JavaScript

Any keyword in a programming language is meaningful, let's first understand it from the literal meaning.

async is the abbreviation of "asynchronous". A function with the async keyword is a declaration of an asynchronous function. The return value is a promise object. If the async keyword function returns not promise, it will be automatically wrapped with ().

async function test() {
 return 'hello word'
}
test();

Run the above code and return the result as follows

await can be considered as the abbreviation of async wait. So it should be well understood that async is used to declare that a function is asynchronous, while await is used to wait for an asynchronous method to complete execution.

If what it waits for is not a Promise object, the await expression's operation result is what it waits for.

If it waits for a Promise object, await will get busy. It will block the subsequent code, wait for the Promise object to resolve, and then get the value of resolve as the result of the await expression.

Let's look at the following code

function test() {
 return new Promise(resolve => {
  setTimeout(() => resolve("hello word"), 2000);
 });
}

const result = test();
(((val)=>{(val)}));
('Finish')

We will use the editor editor code execution order.

1. First we define a method, which returns the Promise object, and the .then() function returns to the call success after two seconds.

2. Next instantiate the test() function.

3. Call the then() function of the result object to receive the return value. Note that this is asynchronous

4. Print log ends

Let's run the code and see the results

I saw the "hello word" that prints "end" first, and then prints. This is asynchronous. Let's modify the code.

function test() {
 return new Promise(resolve => {
  setTimeout(() => resolve("hello word"), 2000);
 });
}

const result = await test();
(result);
('Finish')

Use the await keyword to connect the test() function, and see the result returned this time

We found that we first print "hello world" and then print "end". Due to the blockage caused by test(), ('end') will wait until two seconds before execution.

Let’s talk about the advantages and disadvantages

Advantages: Compared with promises, async/await handles then call chains, the code is much clearer, almost the same as synchronous code.

Cons: Abuse of await can cause performance issues because await blocks code.

Summarize

This is the article about the usage and understanding of asynchronous/waiting in JavaScript. For more information about the usage of asynchronous/waiting in JavaScript, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!