Combined with the collection article async await, 8 figures explain the execution sequence summary in detail

Time:2021-12-1
// 1
function axiosGetList() {
  return new Promise((resolve, reject) => {
    console.log('axios')
    resolve(true)
  })
}
// 2
async function getList() {
  const a = await axiosGetList()
  if (a) {
    Console.log ('request succeeded ')
  }
}
//Execute
c()
// 3
function c() {
  console.log('c start')
  async function dd() {
    const a = await getList()
    console.log('a:',a)
  }
  dd()
  console.log('c end')
}
// 4
new Promise((r, j) => {
  console.log('promise1')
  R() // without this line, promise 2 will not execute
}).then(() => {
  console.log('promise2')
})
// 5
setTimeout(() => {
  console.log('settimeout')
}, 0)
// 6
console.log('window')



Output results (Google browser):

1、c start
2、axios
3、c end
4、promise1
5、window
6. Request succeeded
7、promise2
8、a: undefined
9、settimeout

Step 1:

Enter c() and execute console.log ('c start ')

Step 2:

Enter dd() to execute await getlist()
Enter getlist() and execute await axiosgetlist()
Enter axiosgetlist() and execute console.log ('axios')

Step 3:

After all awaits are executed
It will jump out to the second step DD () (that is, the function that executes await for the first time)
First, find the synchronization at the same level as it (DD ()) and execute it)
Console. Log ('c end '), after the synchronization of the same level is completed
Will jump to the outer layer to perform synchronization
[here's a reminder. In case of await, the following programs will be truncated first]

Step 4:

Execute the of the outermost new promise()
Console. Log ('promise1 '), the then function will not be executed at this time
Not described here

Step 5:

Execute console.log ('window ')
Why not execute setTimeout? SetTimeout is always executed last
Not described here

Step 6:

After performing the synchronization of the outer layer, it will return to the place where await was called
Which step to go back to is to go back to the last place where await was executed
What are you going to do? Execute the then method
In the GetList () method, we get it through assignment
Of course, you can also write it in the form of then. Replace it with then
Await axiosgetlist(). Then (() = > {console. Log ('request succeeded ')})

Step 7:

At this time, then in await is finished
It will first jump to the outer layer to find the asynchronous function and execute it
We still have a then function on the outermost layer that is not executed
console.log('promise2')

Step 8:

Well, the internal and external then functions are all executed
You can safely go back to the program behind await and return to the first call
Execute console.log ('a ', a) after await
A here is undefined because it does not receive a return value

Step 9:

Execute console.log ('settimeout ') of setTimeout

Conclusion: the article is only a personal conclusion, which is not guaranteed to be 100% correct. Learn from the times, review the old and know the new