executing order about promise when different resolve is invoked

Question

I'm confused about resolve in Promise.

resolve is invoked before innerResolve, but why 'inner Promise then execute' is logged before 'Promise then execute' in chrome console.

I think it might be that:

When the state of a promise is PENDING, invoking resolve just set the state to FULFILLED, and when then method is invoked the job will be queued into jobQueue.innerPromise.then is invoked first, so the job is queued first.

Is there a normative explanation to this question?

Here is my code:

console.log("main start")
new Promise(resolve =>{
  new Promise(innerResolve =>{
    resolve()
    console.log("resove is called")
    innerResolve()
    console.log("innerResolve is called")
  }).then(() => {
    console.log('inner Promise then execute')
  })
}).then(() => {
    console.log('Promise then execute');
})
console.log("main end")

Both your promises are resolved as soon as they are created. At that point, yes, it’s just about the order in which the `.then()`s are called. See https://stackoverflow.com/questions/46408228/es6-promise-execution-order-for-returned-values/46409443#46409443 for an overview of some relevant spec stuff. — Ry-, Oct 02 '17 at 07:18

score 1 · Answer 1 · answered Oct 02 '17 at 07:22

resolve() does not invoke then then method. The invocation of resolve() is what queues the then method to be invoked after the next tick, so the entire inner promise resolver will execute at once before the inner then method, and then the outer then method will be invoked in that order on the next tick, because the inner promise is chained chained synchronously inside the outer promise before the outer promise is chained.

I added two more logs to help clarify why the order of the then methods is different than you were expecting:

console.log("main start")
new Promise(resolve =>{
  console.log("outer resolver execute")
  new Promise(innerResolve =>{
    resolve()
    console.log("resove is called")
    innerResolve()
    console.log("innerResolve is called")
  }).then(() => {
    console.log("inner Promise then execute")
  })
  console.log("inner promise chained")
}).then(() => {
    console.log("Promise then execute");
})
console.log("main end")

score 0 · Answer 2 · answered Oct 02 '17 at 07:19

bot resolve would be called since they are in a single stack frame

resolve()
console.log("resove is called")
innerResolve()
console.log("innerResolve is called")

once this is done, the event loop checks if the promise is resolved or not and executes all finished promises, since both are done. It might call any of them depending on the compiler. try the following example

console.log("main start")
new Promise(resolve =>{
  new Promise(innerResolve =>{
    resolve()
    console.log("resove is called")
    setTimeout(innerResolve, 1000);
    console.log("innerResolve is called")
  }).then(() => {
    console.log('inner Promise then execute')
  })
}).then(() => {
    console.log('Promise then execute');
})
console.log("main end")

since the innerResolve was executed later, the then() was called later

executing order about promise when different resolve is invoked

2 Answers2