[This is the ninth day of my participation in the August More Text Challenge. For details, see: August More Text Challenge]

The async function and await keywords were added to ECMAScript 2017 and are widely used in mainstream script libraries and other JavaScript programming. Today I will take you to learn.

Function hellworld() {return "hello! Beautiful world!" ; } console.log(hellworld()); / / hello! Beautiful world! Async function asyHellworld() {return "Hello! Beautiful world!" ; } console.log(asyHellworld()); // Promise {' Hello! Beautiful world! '}Copy the code

The normal function Hellworld will simply return the string Hello! Beautiful world! , and the async function returns the Promise object.

If you want to use the value returned by the asynchronous function, you need to add a.then() block after it, as follows:

Async function asyHellworld() {return "Hello! Beautiful world!" ; } asyHellworld().then((str) => console.log(str)); / / hello! Beautiful world!Copy the code

The await keyword ensures that the Promise of the asynchronous function will complete and return the result before continuing with other code that may need to wait for the value.

Async function asyHellworld() {return await promise.resolve (" Hello! Beautiful world!" ); } asyHellworld().then(console.log); / / hello! Beautiful world!Copy the code

This code, while simple, does show the use of the await keyword and how it should use the Promise object in the body of the function.

Next, to make the code easier to understand, remove the Promise syntax from the code as follows:

Async function asyHellworld() {return "Hello! Beautiful world!" ; } async function printHello() { const strHello = await asyHellworld(); console.log(strHello); } printHello();Copy the code

The above code makes it more intuitive to see the use of async and await. Usually async and await are used to handle asynchronous operations and are a way to turn async into synchronization.

Async declares a function to represent the asynchronous function, and await the completion of an asynchronous operation in the function.

With the introduction above, we have an idea of async and await, so what can we do with them?

The await keyword ensures that the Promise of the asynchronous function will complete and return the result before continuing with other code that may need to wait for the value.

Therefore, when processing AJAX asynchronous requests, such as in VUE projects, it is usually handled as follows:

Login (username, password).then((loginResult) => { ); });Copy the code

With await we can do this:

const loginResult = await login(username, password);
console.log(loginResult);
Copy the code

“Await” must be used in an asynchronous function. If it is handled in a store, it needs to be changed to “await” :

const actions = { async [LOGIN]({ commit }, payload) { const { username, password } = payload; const loginResult = await login(username, password); console.log(loginResult); }};Copy the code

As you can see here, the advantage comes when dealing with then chains consisting of multiple promises.

There is also a common use, is to implement the program pause, namely sleep method, implementation code is as follows:

const sleep = (ms) => { return new Promise((resolve) => setTimeout(resolve, ms)); }; (async () => {console.log(" start execution, print hello in 10 seconds "); await sleep(10 * 1000); The console. The log (" hello "); }) ();Copy the code

conclusion

This article gives a brief introduction to the usage and usage scenarios of async and await in JavaScript.