The javascript Promise problem that has bothered me all day [duplicate]

Question

How does this code work?

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

The result is ‘1 2 4 3’

Answer 1

The easiest to understand what happens with Promises is to unchain it as much as you can.

So in this case, we have to remember that the Promise constructor is ran synchronously, microtasks are pushed to a queue (FIFO) and that it's only when the promise to which we attached our callback with .then() will resolve, that our callback will get pushed to that queue.

So we can rewrite your snippet like this:

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)
*/