一、一个面试题
先来看一个字节面试的真题
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. 初始状态
代码都在调用栈中。
image.png
1. 第一步
执行当前调用栈，先打印1，然后执行new Promise，打印2，然后将.then回调放到微任务队列，将setTimeout回调放到宏任务队列，然后打印5，调用栈为空。
打印1,2,5。
image.png
2. 第二步
查看微任务队列，取出promise.then的回调放入调用栈中执行，执行完后调用栈为空。
打印3。
image.png
3. 第三步
微任务队列为空，所以查找宏任务队列中的setTimeout回调，放入调用栈中，执行完后为空。
打印4。
image.png
4. 结束
调用栈为空，执行结束。
image.png
最终结果是 1,2,5,3,4
下面通过几个面试真题加深理解吧。
五、真题
更多真题请访问
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。
调用栈，宏任务队列和微任务队列都为空，执行结束。
网友评论