困扰我一整天的 javascript Promise 问题

Question

这段代码是如何工作的？

new Promise(resolve => {
    new Promise(resolve1 => {
        console.log(1)
        resolve1()
      })
      .then(() => {
        console.log(2)
      })
      .then(() => {
        console.log(3)
      })
    resolve()
  })
  .then(() => {
    console.log(4)
  })

结果是'1 2 4 3'

Answer 1

最容易理解 Promise 发生的事情是尽可能多地解开它。

因此，在这种情况下，我们必须记住Promise构造函数是同步运行的，微任务被推送到队列（FIFO），并且只有当我们附加回调的承诺.then()将解析时，我们的回调才会被推送到该队列队列。

所以我们可以像这样重写你的代码片段：

const outer_1 = new Promise(resolve => {
  const inner_1 = new Promise(resolve1 => {
    console.log(1);
    resolve1();
  });
  const inner_2 = inner_1.then(() => {
    console.log(2);
  });
  const inner_3 = inner_2.then(() => {
    console.log(3);
  })
  resolve()
});
const outer_2 = outer_1.then(() => {
  console.log(4)
})
/*
And the execution order:

# sync
  inner_1 ->
    log(1)
    queue microtask (inner2)
  outer_1 ->
    queue microtask (outer2)
# microtask-checkpoint
  inner_2 -> 
    log(2)
    queue microtask (inner3)
  outer_2 ->
    log(4)
  inner_3 ->
    log(3)
*/