承诺链调用和单独调用之间的区别？

Question

代码示例 1:


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

输出：

代码 smaple2:

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

输出：

我想第一个应该和第二个有相同的输出。因为在示例1中，then是按顺序调用的，回调应该是一个一个排列的。但是结果好像是第二行Promise.resolve切入了行

我是不是误会了什么？

Answer 1

当调用 .then 的 Promise 解析时，通过 .then 添加的每个回调都将被推送到微任务队列。
这个队列将以先进先出的顺序执行，每个微任务一旦执行就会从队列中移除。

两种情况都在做非常不同的事情，为了更好地理解差异，这里重写了两种情况，没有任何链接并按执行顺序重新排序，但在执行方面与 OP 版本相同。

const cb1 = ()=>{console.log('1')};
const cb2 = ()=>{console.log('2')};
const cb3 = ()=>{console.log('3')};
const cb4 = ()=>{console.log('4')};

// microtask queue []
const p1 = Promise.resolve(); // microtask queue [p1];
const p2 = Promise.resolve(); // microtask queue [p1, p2];

// p1() => add p3
const p3 = p1.then( cb1 ); // microtask queue [p2, p3];

// p2() => add p4
const p4 = p2.then( cb3 ); // microtask queue [p3, p4];

// p3() => cb1 + add p5
const p5 = p3.then( cb2 ); // microtask queue [p4, p5];

// p4() => cb3 + add p6
const p6 = p4.then( cb4 ); // microtask queue [p5, p6];

// p5() => cb2 // microtask queue [p6];
// p6() => cb4 // microtask queue [];

const cb1 = ()=>{console.log('1')};
const cb2 = ()=>{console.log('2')};
const cb3 = ()=>{console.log('3')};
const cb4 = ()=>{console.log('4')};

// microtask queue []
const p1 = Promise.resolve(); // microtask queue [p1]
const p2 = Promise.resolve(); // microtask queue [p1, p2]
const p3 = Promise.resolve(); // microtask queue [p1, p2, p3]
const p4 = Promise.resolve(); // microtask queue [p1, p2, p3, p4]

const p5 = p1.then( cb1 ); // microtask queue [p2, p3, p4, p5]
const p6 = p2.then( cb2 ); // microtask queue [p3, p4, p5, p6]
const p7 = p3.then( cb3 ); // microtask queue [p4, p5, p6, p7]
const p8 = p4.then( cb4 ); // microtask queue [p5, p6, p7, p8]

// p5() => cb1 // microtask queue [p6, p7, p8]
// p6() => cb2 // microtask queue [p7, p8]
// p7() => cb3 // microtask queue [p8]
// p8() => cb4 // microtask queue []

承诺链调用和单独调用之间的区别？

Difference between chain call of promise and separately?

javascript

event-loop

promise