一文讲透Promise面试题：说出代码执行结果在前端面试中，promise的代码执行结果是常出现的一个题目。其实主要考察

一、一个面试题

先来看一个字节面试的真题

console.log(1);

new Promise(resolve => {
    resolve();
    console.log(2);
})
.then(() => {
    console.log(3);
});

setTimeout(() => {
    console.log(4);
}, 0);

console.log(5);

这是一个经典的promise的代码执行结果的面试题，下面我们说明一下这类题目应该如何解答。

在前端面试中，promise的代码执行结果是常出现的一个题目。这个题目主要考察应聘者对promise的理解和对事件循环的理解。

实际上只要掌握几个简单的规则，这种题目就可以轻而易举地解答。

通常这类题目的代码中，主要会出现promise/async-await、setTimeout/setInterval。其中async-await是promise语法糖，所以逻辑是一样的，setInterval和setTimeout的回调都是放在宏任务队列中，规则相同。因此只要掌握了promise和setTimeout的执行规则，就能够解答这类题目。

二、规则

我们需要掌握5条规则就可以解答这类题目。这5条规则涉及两个知识点：promise和事件循环。

promise

1. new Promise时候马上执行

new Promise(resolve => {
    console.log('test');
    resolve();
});

上面的代码执行时候，会立刻打印"test"，所以Promise实例化时候传入的回调是同步执行的。

2. resolve或者reject之后状态不再改变，但后面代码会执行

new Promise(resolve => {
    resolve();
    console.log('test');
    reject();
});

上面的Promise在回调中执行了resolve、打印"test"、reject，这3句代码都会执行，但是reject不会生效，因为执行resolve后promise状态已经变为fullfilled。

事件循环

1. promise的then中的回调放入微任务队列，setTimeout放入宏任务队列

promise.catch的回调一样，也会放入微任务队列。

2. 调用栈中代码执行完之后，先取微任务队列中的任务执行，直到微任务队列为空

3. 微任务队列为空，取宏任务队列中的一个任务开始执行，然后重复上一步，直到宏任务队列为空

可以简单描述为：一个宏任务 + 所有微任务 ->一个宏任务 + 所有微任务……，循环往复。

三、解题思路

根据上面的规则，我们可以总结解题的思路是

先列出调用栈、宏任务队列、微任务队列及初始状态：调用栈是当前的代码，最开始宏任务队列和微任务队列为空。
遇到new Promise，直接执行Promise的函数参数。
遇到resolve/reject，改变状态。
遇到promise.then/promise.catch，放入微任务队列、遇到setTimeout放入宏任务队列
调用栈执行完后，从微任务队列取任务放到调用栈中执行。
微任务队列执行完后，从宏任务队列取一个放到调用栈执行，然后执行上一步，直到宏任务队列为空。

下面我们通过最开始提到的题目来演示一下如何操作

四、示例

题目：说出下面代码执行结果

console.log(1);

new Promise(resolve => {
    resolve();
    console.log(2);
})
.then(() => {
    console.log(3);
});

setTimeout(() => {
    console.log(4);
}, 0);

console.log(5);

解题过程

0. 初始状态

代码都在调用栈中。

1. 第一步

执行当前调用栈，先打印1，然后执行new Promise，打印2，然后将.then回调放到微任务队列，将setTimeout回调放到宏任务队列，然后打印5，调用栈为空。

打印1,2,5。

2. 第二步

查看微任务队列，取出promise.then的回调放入调用栈中执行，执行完后调用栈为空。

打印4。

3. 第三步

微任务队列为空，所以查找宏任务队列中的setTimeout回调，放入调用栈中，执行完后为空。

打印3。

4. 结束

调用栈为空，执行结束。

最终结果是 1,2,5,3,4

下面通过几个面试真题加深理解吧。

五、真题

更多真题请访问

灵题库www.lingtiku.com

1. 说出代码执行结果

const promise = new Promise((resolve,reject)=>{
    console.log(1);
    resolve();
    console.log(2);
    reject();
});
setTimeout(()=>{console.log(5)},0);
promise.then(()=>{console.log(3)})
.then(()=>{console.log(6)})
.catch(()=>{console.log(7)});
console.log(4);

解析

答案是1,2,4,3,6,5。

首先new Promise时候打印1和2，因为new Promise时候会立即执行传入的方法。

然后后面代码都是异步代码，先将setTimeout的回调加入宏任务队列，再把promise.then放入到微任务队列，然后直接执行最后一句，打印4。

这样宏任务代码执行完了，接下来开始执行微任务队列中的任务，由于promise resolve，因为promise resolve之后状态不会再改变，因此不会执行到reject的对调，所以打印3和6。

微任务队列为空，再到宏任务队列中查找任务，找到setTimeout回调执行，打印5。

调用栈、宏任务队列、微任务队列都为空，代码执行结束。

2. 说出代码执行结果

const first = () => (new Promise((resolve, reject) => {
    console.log(3);
    let p = new Promise((resolve, reject) => {
        console.log(7);
        setTimeout(() => {
            console.log(5);
            resolve();
        }, 0);
        resolve(1);
    });
    resolve(2);
    p.then((arg) => {
        console.log(arg);
    });
}));
first().then((arg) => {
    console.log(arg);
});
console.log(4);

解析

3, 7, 4, 1, 2, 5

首先定义first。

然后执行first，然后执行new Promise传入的方法，先打印3。

又new Promise，执行其中传入的方法，打印7。

执行setTimeout，将回调放入宏任务队列。

执行resolve(1)，将内部promise状态置为fullfilled，值为1。

执行resolve(2)，将外部promise状态置为fullfilled，值为2。

执行内部promise.then方法，将回调加入微任务队列。

执行first().then，即外部的promise，将回调加入到微任务队列。

调用栈为空，开始从微任务队列拿取任务，首先拿到内部promise的回调，打印其值1。

然后从微任务队列中拿取外部的promise的回调，打印其值2。

此时微任务队列为空，开始从宏任务队列中拿取任务，即setTimeout回调，打印5。

调用栈，宏任务队列和微任务队列都为空，执行结束。

一文讲透Promise面试题：说出代码执行结果