Promise resolve then执行

Question

这段代码里promise.resolve()后面的执行流程是怎样的

代码

setTimeout(() => console.log("1"));
Promise.resolve()
    .then(() => {
        console.log('2');
        Promise.resolve()
            .then(() => {
                console.log('3');
            })
        setTimeout(() => console.log("4"));
    })
    .then(() => {
        console.log('5');
    });

结果

2
3
5
1
4

刚接触异步编程 看了看MDN一头雾水

Answer 1

Promise.resolve() 实际上是 new 一个 Promise 然后马上进入 Fulfilled 状态，执行 then 的时候会返回一个新的 Promise（promise2），返回新 Promise 是为了实现链式调用。如果这时已经是 Fulfilled 或 Rejected 状态，then 会生成微任务加入队列，生成的微任务中包含 then 回调函数和改变 promise2 状态两部分，对应下面代码中的 onFulfilled 和 resolvePromise。
下面是 Mock Promise 的部分代码，如果想对 Promise 的实现有个深入了解，推荐跟着https://juejin.cn/post/694531... 敲一遍。

class MyPromise {
  then = (onFulfilled, onRejected) => {
    const promise2 = new MyPromise((resolve, reject) => {
      const fulfilledMicrotask = () => {
        queueMicrotask(() => {
          try {
            const x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        });
      };
      const rejectedMicrotask = () => {
        queueMicrotask(() => {
          try {
            const x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (error) {
            reject(error);
          }
        });
      };
      if (this.status === FULFILLED) {
      // 状态为 Fulfilled
        fulfilledMicrotask();
      } else if (this.status === REJECTED) {
      // 状态为 Rejected
        rejectedMicrotask();
      } else {
      // 状态为 Pending，此时并没有生成微任务，只是将函数封装好推入 Callback 队列
        this.onFulfilledCallbacks.push(fulfilledMicrotask);
        this.onRejectedCallbacks.push(rejectedMicrotask);
      }
    });
    return promise2;
  };
}

了解实现之后，我们来执行一下代码

setTimeout(() => console.log("1"));
Promise.resolve()
    .then(() => {
        console.log('2');
        Promise.resolve()
            .then(() => {
                console.log('3');
            })
        setTimeout(() => console.log("4"));
    })
    .then(() => {
        console.log('5');
    });

1. 等到触发条件满足，宏任务队列推入 () => console.log("1")
2. Promise.resolve() 设置为 Fulfilled 状态，这时 FulfilledCallbacks 为空无回调执行
3. 执行 then，这时 Promise 状态是 Fulfilled，生成一个微任务加入微任务队列，并且返回新的 Promise
4. 执行第二个 then，注意这个 then 是新 Promise 的，这时新 Promise 仍是 Pending 状态，将回调函数加入 FulfilledCallbacks，再返回一个新的 Promise

5. 代码执行完毕，看看微任务队列，这时只有一个微任务，取出执行。

   1. 输出 2
   2. 又遇到一个 Promise.resolve，then 一样的操作生成微任务推进微任务队列
   3. setTimeout，等到触发条件满足，宏任务队列推入 () => console.log("4")
   4. 回调函数执行完毕返回值为 undefined，将新 Promise 的状态由 Pending 改为 Fulfilled，遍历 FulfilledCallbacks 逐个生成微任务加入微任务队列

6. 代码执行完毕，看看微任务队列，这时有两个任务

   1. 第一个任务输出 3
   2. 第二个任务输出 5
7. 微任务队列空了，开始执行宏任务，输出 1，输出 4