promise、async和await的执行顺序

发表于

1、题目和答案

一道题题目：下面这段promise、async和await代码，请问控制台打印的顺序？ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}

async function async2() {
    console.log('async2')
}

console.log('script start')

setTimeout(function() {
    console.log('setTimeout')
}, 0)

async1();

new Promise(function(resolve) {
    console.log('promise1')
    resolve();
}).then(function() {
    console.log('promise2')
})

console.log('script end')

上述，在Chrome 66和node v10中，正确输出是： 

1
2
3
4
5
6
7
8
script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout


2、知识点

显然，这考察的是js中的事件循环和回调队列。注意以下几点：

  • Promise优先于setTimeout宏任务。所以，setTimeout回调会在最后执行。
  • Promise一旦被定义，就会立即执行。
  • Promise的reject和resolve是异步执行的回调。所以，resolve()会被放到回调队列中，在主函数执行完和setTimeout前调用。
  • await执行完后，会让出线程。async标记的函数会返回一个Promise对象


3、 难点

最令人困惑的，就是async1 end在promise2之后输出


4、 猜测await表达式

1
[return_value] = await expression;
1
2
3
4
5
6
7
8
9
10
11
12
// expression 可能被转换成如下代码
function _expression() {
    let result = eval(expression);
    let isPromise = result.toString().includes('Promise');
    if (isPromise) {
        result.then(Promise.resolve, Promise.reject);
    } else {
        return Promise.resolve(result);
    }
}
// 无果
// 这段时间太忙了（2018/10/10），逃~~~