Why Async/Await?

We already know the Promise solution, so why the new Async/Await standard in ES7?

The answer is obvious: Although Promise breaks out of the strange circle of asynchronous nesting and is expressed more clearly in chained form, we also find that if there are a large number of asynchronous requests, it will be very difficult to find the then filled with the screen in the case of complicated process, and the emergence of Async/Await in ES7 is to solve such complicated situation

Basic concepts of Promise

Promise is essentially a constructor, a solution for asynchronous programming, originally proposed by the community to solve asynchronous callback hell, and later introduced in ES6 by the W3C, which felt good about it

We create a Promise object with the new keyword, and its parameters are a callback method. The callback method takes two parameters, a success callback and a failure callback, so we can use these two callback parameters to define the success and failure data. So how do we receive the data they return?

  1. The then() method is used to receive data after success
  2. The catch() method is used to receive data after a failure

Basic usage examples:

const setDelay = (millisecond) = > {
  return new Promise((resolve, reject) = >{
      if (typeofmillisecond ! ='number') reject(new Error('Parameter must be of type number'));
      setTimeout((a)= > {
        resolve('I'm late${millisecond}The output 'after milliseconds)
      }, millisecond)
  })
}
setDelay(2000).then(res= >{	
    // Successfully returned data field
    console.log(res)
}).catch(error= >{
    // Failed to return data
    console.log(error)
})
Copy the code

Iii. Introduction of Async/await

3.1 Promise based Async/await

What is async/await? It can be summed up in one sentence: Async /await is a pair of good gay friends who are born to serve Promise. Async /await is the evolutionary father of Promise. Why do you say that? Let me tell you more.

Why should there be async/await?

As mentioned earlier, this improved version was created to address the large number of complex, hard-to-read promises that were asynchronous.

The two gay friends must be present at the same time, so Async:

async function process() {}Copy the code

Async must declare a function, do not declare anything else, or await it.

This statement is also wrong!

const async demo = function () {} // This is not the case
Copy the code

3.2 await meaning

  • awaitIt means thatWaiting for the. It can be followed by an expression. In the case of a value (string, number, ordinary object, etc.), the return value is its own value.
  • But the most common one is followed by onepromiseObject.awaitWill wait for thispromiseThe status of thependingtofulfilledorrejected. It blocks during this time, delaying the execution of statements following the await statement.
  • ifpromiseThe result of the object isresolveIt will beresolveValue of, asawaitThe result of an operation to an expression.

Remember that await is waiting for an asynchronous return from a Promise

We often say that the emergence of async/await eliminates Promise, which can be said to be completely wrong. On the contrary, it is because of Promise that there is an improved version of async/await. From the above analysis, it can be seen that both complement each other and are indispensable.

To learn async/await well, you must first master Promise