The introduction

A few simple examples to help understand async and await.

A, async

As the name implies, async means asynchronous. Of course, it is far from enough to know that async means asynchronous.

// A normal function
function one(){
  return 'one'
};
console.log(one());
// Output result: one

/ / async function
async function two(){
  return 'two'
}
console.log(two());
// This is a big pity. {< big pity >: "Two "}
Copy the code

First of all, we can see that the execution mode of async function is the same as that of ordinary function, but the result is different. The execution result of ordinary function is to print what is returned, while the result of async function is to print a Promise object.

// A normal function that returns a Promise object
function three(){
  return new Promise(resolve= >{
    resolve('three')})}console.log(three());
//Promise {<fulfilled>: "three"}
Copy the code

We can find that the return form of three function and two function is the same, that is to say, the return result of async modified function is essentially a Promise object with a depressing state. Since async is the nature of the function, can it also do chain-operations? Let’s see another example.

async function two(){
  return 'two'
};
two().then(res= >{
  console.log(res);
  // Output result: two
})
Copy the code

Yes, because of the same nature async functions can also chain operations.

Second, await

Let’s also take a look at an example of what it’s waiting for.

//return a Promise object that simulates async
function one(){
  return new Promise(resolve= >{
    setTimeout(() = >resolve('one'),2000)})};// Use await in async functions and time with console.time
async function two(){
  console.time('flag')
  let res_one = await one();
  console.timeEnd('flag')}; two();// The command output is as follows: flag: 2000.622802734375 ms
Copy the code

As you can see, it took 2000.6ms to execute from console.time to console.timeEnd, which means the thread blocked 2000.6ms while executing one() before continuing. It is obvious that the following statement will not be executed until the result of one() is returned (2000ms delay, 0.6ms execution time) after execution of await one() in function two.

We now know that when an async function executes another async function with await, the following statement will wait for the current statement to complete execution before continuing, so will the outside async function be affected? Look at the following example.

//return a Promise object that simulates async
function one(){
  return new Promise(resolve= >{
    setTimeout(() = >resolve('one'),2000)})};// Use await in async functions and time with console.time
async function two(){
  console.time('flag')
  let res_one = await one();
  console.timeEnd('flag')}; two();console.log('run');
// Output result:
/ / run
/ / flag: 2000.622802734375 ms
Copy the code

Will output ‘run’ string first, and then wait 2000.6ms to print the time to execute await one(), from which we know that using await in async function will not affect the execution of statements outside the async function.

Conclusion:

  1. The essence of async function is to return a Promise object with a depressing state. The features of Promise object async function also have basically, such as then() chain operation.
  2. If an async function executes another async function with await, subsequent statements will wait until the result of the current statement execution is returned. However, statements outside the async function will not be affected.