What is the difference between returned Promise?

问题

There are two cases, both return Promise and are chained with the following then methods. But the result sequence is different. Some notes: Promise.resolve(value) -> returns immediately fulfilled Promise with the value. And in the then method when we return value again it returns fulfilled Promise with the value. Logically there shouldn't be any difference. Both are immediate... Thanks in advance...

Promise.resolve(1)
  .then((v) => {
    console.log(v);
    return Promise.resolve(v + 1);
  })
  .then((v) => {
    console.log(v);
    return Promise.resolve(v + 1);
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  });

Promise.resolve(10)
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  });

//Result on the console:
//1
//10
//11
//12
//2
//13
//3
//4

Promise.resolve(1)
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  });

Promise.resolve(10)
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  })
  .then((v) => {
    console.log(v);
    return v + 1;
  });

//Result on the console:
//1
//10
//2
//11
//3
//12
//4
//13

回答1:

There is an important difference: Remember that then returns a promise (let's call it promise T). When you do

return Promise.resolve(v + 1);

...you're resolving promise T to a promise (let's call it promise B). But when you do:

return v + 1;

...you're resolving promise T to an immediate value.

Resolving promise T to promise B introduces an extra "tick" in the resolution cycle. Instead of promise T queuing a call to its resolution handler, it has to wait until promise B calls the resolution handler T has to set on it, and then call its resolution handler. Hence the extra "tick" (basically, another cycle of the microtask queue).

Simpler example, note that it logs "Second 2" *before "First 2":

Promise.resolve(1)
    .then(v => Promise.resolve(v + 1))
    .then(v => console.log(`First: ${v}`));
Promise.resolve(1)
    .then(v => v + 1)
    .then(v => console.log(`Second: ${v}`));

...whereas if you don't have the extra promise, it logs "First 2" before "Second 2":

Simpler example, note that it logs "Second 2" *before "First 2":

Promise.resolve(1)
    .then(v => v + 1)
    .then(v => console.log(`First: ${v}`));
Promise.resolve(1)
    .then(v => v + 1)
    .then(v => console.log(`Second: ${v}`));

This extra tick was recently removed for async functions that do things like return await somePromise (instead of just return somePromise) because it can reliably be removed for native promises handled internally via async/await. But I'm not sure it can be reliably removed for your case, and/or whether doing so will receive any significant attention from those who'd have to do it. It would require treating a native promise returned from a then handler different from any other thenable¹, which could be problematic. (But I don't know for sure that it would be.)

¹ thenable vs. promise: https://promisesaplus.com

回答2:

Remember that javascript is one threaded, and will add all methods to a queue. What I done below is how the promises, in a way, should be written.

Javascript adds all the tasks in the first column, goes through the queue to execute all commands, and then adds more tasks in column 2 and 3 as they are found in the asynchronous methods.

It's pretty logical if you look at it like this.

来源：https://stackoverflow.com/questions/58217603/what-is-the-difference-between-returned-promise

标签

javascript

promise