Thoroughly understand the execution order of async/await and promise

preface

I read many articles on the Internet about the execution order of async/await and promise. I feel that they are not on the point. They are speculating the execution order according to the results. This article takes you through the order in which the two are executed. This assumes that you already have some understanding of async/await and promise itself.

sample

Take a look at the examples below and think about the output of each.

1 / / examples
console.log(Example "-- -- -- -- -- -- -- 1 -- -- -- -- -- -- --");
const p1 = Promise.resolve()
async function foo() {
  await p1;
  console.log('await');
}
foo()
p1.then(() = >{
  console.log('promise');
})


2 / / examples
console.log(Example "-- -- -- -- -- -- -- 2 -- -- -- -- -- -- --");
const p2 = Promise.resolve()
async function foo() {
  await p2;
  console.log('await');
}
p2.then(() = >{
  console.log('promise');
})
foo()


3 / / examples
console.log(Example "-- -- -- -- -- -- -- 3 -- -- -- -- -- -- --");
const p3 = Promise.resolve()
async function foo() {
  await 1;
  console.log('await');
}
foo()
p3.then(() = >{
  console.log('promise');
})


4 / / examples
console.log(Example "-- -- -- -- -- -- -- 4 -- -- -- -- -- -- --");
const p4 = Promise.resolve()
async function foo() {
  await 1;
  console.log('await');
}
p4.then(() = >{
  console.log('promise');
})
foo()


 5 / / examples
 console.log("-- -- -- -- -- -- -- example 5 -- -- -- -- -- -- --");
const p5 = Promise.resolve()
async function foo () {
  await p5;
  console.log('await')
}
foo()
p5.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))


6 / / examples
console.log("-- -- -- -- -- -- -- example 6 -- -- -- -- -- -- --");
const p6 = Promise.resolve()
async function foo () {
  await p6;
  console.log('await')
}
p6.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))
foo()


/ / case 7
console.log("-- -- -- -- -- -- -- example 7 -- -- -- -- -- -- -");
const p7 = Promise.resolve()
async function foo () {
  await 1;
  console.log('await')
}
foo()
p7.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))


8 / / examples
console.log("-- -- -- -- -- -- -- example 8 -- -- -- -- -- -- -");
const p8 = Promise.resolve()
async function foo () {
  await 1;
  console.log('await')
}
p8.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))
foo()

Copy the code

Here are the answers:

Node version: V10.15.3

1 / / examples
console.log(Example "-- -- -- -- -- -- -- 1 -- -- -- -- -- -- --");
const p1 = Promise.resolve()
async function foo() {
  await p1;
  console.log('await');
}
foo()
p1.then(() = >{
  console.log('promise');
})

/* ------- example 1------- promise await */

2 / / examples
console.log(Example "-- -- -- -- -- -- -- 2 -- -- -- -- -- -- --");
const p2 = Promise.resolve()
async function foo() {
  await p2;
  console.log('await');
}
p2.then(() = >{
  console.log('promise');
})
foo()
/* ------- example 2------- promise await */

3 / / examples
console.log(Example "-- -- -- -- -- -- -- 3 -- -- -- -- -- -- --");
const p3 = Promise.resolve()
async function foo() {
  await 1;
  console.log('await');
}
foo()
p3.then(() = >{
  console.log('promise');
})
/* ------- example 3------- await promise */

4 / / examples
console.log(Example "-- -- -- -- -- -- -- 4 -- -- -- -- -- -- --");
const p4 = Promise.resolve()
async function foo() {
  await 1;
  console.log('await');
}
p4.then(() = >{
  console.log('promise');
})
foo()
/* ------- example 4------- promise await */

5 / / examples
console.log("-- -- -- -- -- -- -- example 5 -- -- -- -- -- -- --");
const p5 = Promise.resolve()
async function foo () {
  await p5;
  console.log('await')
}
foo()
p5.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))
/* ------- example 5------- promise 22 await 33 44 */

6 / / examples
console.log("-- -- -- -- -- -- -- example 6 -- -- -- -- -- -- --");
const p6 = Promise.resolve()
async function foo () {
  await p6;
  console.log('await')
}
p6.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))
foo()
/* ------- example 6------- promise 22 33 await 44 */


/ / case 7
console.log("-- -- -- -- -- -- -- example 7 -- -- -- -- -- -- -");
const p7 = Promise.resolve()
async function foo () {
  await 1;
  console.log('await')
}
foo()
p7.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))
/* ------- example 7------- await promise 22 33 44 */

8 / / examples
console.log("-- -- -- -- -- -- -- example 8 -- -- -- -- -- -- -");
const p8 = Promise.resolve()
async function foo () {
  await 1;
  console.log('await')
}
p8.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))
foo()
/* ------- example 8------- promise await 22 33 44 */

Copy the code

Node version: V14.15.0

1 / / examples
console.log(Example "-- -- -- -- -- -- -- 1 -- -- -- -- -- -- --");
const p1 = Promise.resolve()
async function foo() {
  await p1;
  console.log('await');
}
foo()
p1.then(() = >{
  console.log('promise');
})

/* ------- example 1------- await promise */

2 / / examples
console.log(Example "-- -- -- -- -- -- -- 2 -- -- -- -- -- -- --");
const p2 = Promise.resolve()
async function foo() {
  await p2;
  console.log('await');
}
p2.then(() = >{
  console.log('promise');
})
foo()
/* ------- example 2------- promise await */

3 / / examples
console.log(Example "-- -- -- -- -- -- -- 3 -- -- -- -- -- -- --");
const p3 = Promise.resolve()
async function foo() {
  await 1;
  console.log('await');
}
foo()
p3.then(() = >{
  console.log('promise');
})
/* ------- example 3------- await promise */

4 / / examples
console.log(Example "-- -- -- -- -- -- -- 4 -- -- -- -- -- -- --");
const p4 = Promise.resolve()
async function foo() {
  await 1;
  console.log('await');
}
p4.then(() = >{
  console.log('promise');
})
foo()
/* ------- example 4------- promise await */

5 / / examples
console.log("-- -- -- -- -- -- -- example 5 -- -- -- -- -- -- --");
const p5 = Promise.resolve()
async function foo () {
  await p5;
  console.log('await')
}
foo()
p5.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))
/* ------- example 5------- await promise 22 33 44 */

6 / / examples
console.log("-- -- -- -- -- -- -- example 6 -- -- -- -- -- -- --");
const p6 = Promise.resolve()
async function foo () {
  await p6;
  console.log('await')
}
p6.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))
foo()
/* ------- example 6------- promise await 22 33 44 */


/ / case 7
console.log("-- -- -- -- -- -- -- example 7 -- -- -- -- -- -- -");
const p7 = Promise.resolve()
async function foo () {
  await 1;
  console.log('await')
}
foo()
p7.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))
/* ------- example 7------- await promise 22 33 44 */

8 / / examples
console.log("-- -- -- -- -- -- -- example 8 -- -- -- -- -- -- -");
const p8 = Promise.resolve()
async function foo () {
  await 1;
  console.log('await')
}
p8.then(() = >{
  console.log('promise');
}).then(() = >console.log(22)).then(() = >console.log(33)).then(() = >console.log(44))
foo()
/* ------- example 8------- promise await 22 33 44 */
Copy the code

Analysis of the

I’m sure many of you know that the content behind “await” is wrapped in a promise. There are two questions to be answered:

How does this packaged promise work internally
What’s the difference between “await” and “constant” and “promise”

Solve these two questions and basically know the order of async/await and promise execution. Here’s a blog post that can help us out.

V8. Dev /blog/fast-a…
Link: www.yuque.com/es2049/blog…

Let me just extract the main conclusions here:

Before Node.js 12, after compiling with the V8 engine, await will generate at least three microtasks.

There was some redundancy involved, so it was optimized later (Node.js 12).

If the input parameter is a PROMISE, it is returned unchanged, encapsulating only the necessary promises. This operation saves an additional promise and two microtasks if the value is already promose.

conclusion

In v10-V12, if an await is followed by a promise, the promise is still wrapped outside and three microtasks are generated internally; If await is not followed by a promise, the value is wrapped as a promise with only one layer.
After v12, await has all been optimized to a single microtask.

Thoroughly understand the execution order of async/await and promise

preface

sample

Here are the answers:

Analysis of the

conclusion

Related Posts

Click back to understand how browsers render

React Writing Tips

React.memo – React.useCallback – React.useMemo