承诺链调用和分别的区别？

Question

代码sample1:

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

输出:

1
3
2
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')});

輸出: Code smaple2: output:

1
2
3
4

我想第一个和第二个的输出应该是一样的。因为在sample1中。then顺序调用，回调应该是一个一个的安排。但结果似乎第二行 Promise.resolve 插队。

我是不是理解错了什么？

Answer 1

每个回调通过 .then 将被推送到微任务队列中，当Promise上的 .then 已被调用解析。这个队列会按照FIFO顺序执行，每个微任务执行后会从队列中删除。

两种情况下做的事情都很不一样，为了更好的理解两者的区别，这里重写了两种情况，没有任何链锁，按照执行顺序重新排序，但在执行上和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 []