Promise魔鬼面试题

news2024/10/5 14:20:08

文章目录

- 题目
- 解析
- - 难点分析
  - 分析输出
  - - step1
    - step2
    - step3
    - step4
    - step5
    - step6

参考/致谢：渡一袁老师

题目

Promise.resolve()
  .then(() => {
    console.log(0);
    return Promise.resolve(4);
  })
  .then((res) => {
    console.log(res);
  });

Promise.resolve()
  .then(() => {
    console.log(1);
  })
  .then(() => {
    console.log(2);
  })
  .then(() => {
    console.log(3);
  })
  .then(() => {
    console.log(5);
  })
  .then(() => {
    console.log(6);
  });

解析

难点分析

这题难点就在于 return Promise.resolve(4) 当返回一个 Promise 的时候是如何处理的，在 Promise a+ 规范中，写道，如图：
也就是说这个当前Promise(表示return Promise了的当前这个Promise) 要与返回的 Promise 保持一致，但是如何保持一致，标准里面并没有说到，也就说实际如何实现这个状态一致，并不关心，在 v8 中，实现的源码如图：
表示的意思是如果返回的是 Promise，它会去调用这个 Promise 的 then 方法，在这个 then 方法里面完成当前 Promsie，但是调用 then 方法完成当前这个 Promise 是会放入到一个微任务队列里面去完成的
至此，这个难点就已经分析完成了

分析输出

step1

我们回到题目本身，来分析一下输出，我们知道，一个 then 方法一定会返回一个 Promise，then 方法是同步的，then 方法里面的回调才是异步的，根据这个准则，我们可以先来确定一下初步的执行状态。

根据这个准则，执行的初步顺序如下：

第一个 Promise.reslove()：记作 pr1，状态为 fulfilled
then(()=>{console.log(0)})：记作 p0，状态为 pending，因为这些then里面的回调函数还是异步任务，目前处于执行then方法的同步阶段，因此未执行也就无法确定 Promise 的状态，后续 pending 同理
then((res)=>{console.log(res)})：记作 pres，状态为 pending
第二个 Promise.reslove()：记作 pr2，状态为 fulfilled
then(()=>{console.log(1)})：记作 p1，状态为 pending
then(()=>{console.log(2)})：记作 p2，状态为 pending
then(()=>{console.log(3)})：记作 p3，状态为 pending
then(()=>{console.log(5)})：记作 p5，状态为 pending
then(()=>{console.log(6)})：记作 p6，状态为 pending

图解如下：

step2

此时同步执行完成，只有两个 Promise 状态完成，这两个函数开始执行，首先就会输出 0，然后根据前面分析的规则，如果返回的是一个 Promise，就会调用这个 Promise的then方法，且是放入一个微队列中执行，这里的 Promise.resolve(4) 记作 p4，那么使用一个伪代码表示即为 addMicrotask(p4.then(()=>完成p0))，为什么是完成呢？这里的返回的事 Promise.resolve()，所以在 then 里面是完成 p0，演变图解如下：