4

The code is:

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);
})

And the result is: 0 1 2 3 4 5 6.

Why log 4 is after log 3? What is the special thing happened when returning a promise object in .then method?

MrMythical
  • 8,908
  • 2
  • 17
  • 45
T.T
  • 321
  • 2
  • 10
  • 1
    Related questions: [Asynchronous Execution Order in JavaScript](https://stackoverflow.com/questions/68882535/asynchronous-execution-order-in-javascript) and [Promise chain .then .catch](https://stackoverflow.com/questions/68784426/promise-chain-then-catch) – Yousaf Sep 06 '21 at 04:36
  • 1
    Keep in mind that questions like this are really only useful for intellectual curiosity. If there are real asynchronous operations and you care about the relative order of execution in two separate promise chains, then you have to write the code to control the sequencing the way you want it - you don't rely on anything that you will get as an answer to this question because it won't be relevant with real asynchronous operations. – jfriend00 Sep 06 '21 at 05:09
  • _"What is the special thing happened when returning a promise object in .then method?"_ Returning a promise from the callback function of `then()` method's callback function _resolves_ the promise returned by the `then` method to the promise returned by its callback function. See: [MDN - then() Return Value](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then#return_value) – Yousaf Sep 06 '21 at 05:12
  • 2
    While there is an answer to this question (that is related to the specification of Promises) the answer is not useful at all. **DO NOT DEPEND ON THE KNOWLEDGE of how this code works**. It's OK if you are curious but then completely forget about the answer. Depending on things like this is a source of bugs. You need to write asynchrnous code to be independent of each other. If they are dependent you need to explicitly make it dependent (call resolve(4) inside then(()=>console.log(3))) – slebetman Sep 06 '21 at 06:46

1 Answers1

1

Javascript runs an event loop.

Here is my guess.

Promise.resolve() creates a promise which will be resolved in the next iteration. And every then block will be execute in the next iteration after the previous block finish. So here is the execution order:

Iteration 1: Created 2 promises (name them A and B) which will be resolved in Iteration 2

Iteration 2: Promise A resolves. Promise B resolves

Iteration 3: then block of Promise A executes, which prints 0 and creates a new promise (name it C) which will be resolved in Iteration 4. First then block of the Promise B executes, which prints 1.

Iteration 4: Second then block of Promise B executes, which prints 2. Promise C resolves. (Since Promise C is added to the event loop later than Promise B, Promise B resolves before Promise C)

Iteration 5: Third then block of Promise B executes, which prints 3. then block of Promise C executes, which prints 4.

Iteration 6: Forth then block of Promise B executes, which prints 5.

Iteration 7: Fifth then block of Promise B executes, which prints 6.

Ricky Mo
  • 6,285
  • 1
  • 14
  • 30