How to use async and await to perform asynchronous processing in JavaScript

Async/await is a main function that can describe the asynchronous processing of Promise more concisely and effectively. Asynchronous processing is a mechanism that can execute the next processing immediately without waiting for the processing result. It can be easily implemented by using Promise.

In the case of Promise, we use "then" to connect, so it becomes a very monotonous code.

For example, if you use "then" to run multiple Promise processes, it would look like this:

getDate()
.then(function(data) {
    return getYear(data)
}) .then(function(year) {
    return getSomething(year)
}) .then(function(item) {
    getAnotherThing(item)
})

In some cases, it is better to use Promise.all(), But you still have to use then.

If we learn how to use async/await, we can improve efficiency.

How to use async/await?

Let’s take a look at the basic syntax first

async can define a function, and you can perform asynchronous processing just by writing it before the function.

async function() { }

If you write async like this, this function will return Promise.

In addition, await is an operator that temporarily stops before the result of Promise processing is returned.

await Promise处理

By simply writing await before the function describing Promise handling, it will pause until the result is returned.

However, please note that await can only be used for functions defined in async!

For this reason, async / await are often used in pairs.

How to write asynchronous processing using async/await?

First, assume the following Promise processing.

function myPromise(num) {
  return new Promise(function(resolve) {
 
    setTimeout(function() { resolve(num * num) }, 3000)
 
  })
}

In this example, it is clear that the processing that deliberately takes 3 seconds is recorded in the Promise.

If you use async/await without then, it is as follows.

async function myAsync() {
    var result = await myPromise(10);
    console.log(result);
}

The execution result is: 100

In this example, an asynchronous processing function is created by assigning async.

Description of Promise processing within the function is await before myPromise()

This will temporarily wait for the Promise process, which will return the result after 3 seconds, and once the result is obtained, the Processing will continue.

In the execution result, the value 100 multiplied by the given parameter 10 can be obtained.

The above is the detailed content of How to use async and await to perform asynchronous processing in JavaScript. For more information, please follow other related articles on the PHP Chinese website!