promise.finally为什么在其调用者的then后面执行?

Question

const a = () => {  return new Promise((resolve) => {    resolve(1);  });};const b = () => {  return new Promise((resolve) => {    a()      .then((aR) => {        console.log(aR);        resolve(2);      })      .finally(() => {        console.log("A");      });  });};const c = () => {  b().then((bR) => {    console.log(bR);  });};c();

今天有一段代码抽象后逻辑如上述代码，我本来觉得输出顺序应该是

1A2

但实际输出却是

12A

不太理解是为什么，求指教。

---

环境：Chrome 版本 126.0.6478.115（正式版本） （64 位）

Answer 1

这个和入栈顺序有关系。你可以在VSC里面用调试模式看到这个具体函数执行和微任务入栈过程。

Answer 2

Promise.prototype.finally() 方法返回一个 Promise，并且在 promise 执行结束时，无论其状态如何，都会执行指定的回调函数。这个方法的回调函数会在当前 Promise 链的最后执行，但它不会改变 Promise 的结果或者状态。

在你提供的代码中，finally 是在 a().then(...) 链的末尾被调用的，但是它不会阻塞或改变 a().then(...) 链的异步执行流程。finally 仅仅确保，无论 a().then(...) 的结果如何，它内部的回调最终都会被调用，但是它并不改变链中其他 then 的执行顺序。

b() 函数返回一个新的 Promise，这个 Promise 在 a() 完成并解析其值后解析为 2。a() 中的 then 回调首先执行，然后 finally 回调执行。b() 返回的 Promise 在 a() 的 finally 回调执行完毕后解析为 2。

当 c() 调用 b() 并附加一个 then 回调时，这个回调会在 b() 返回的 Promise 解析为 2 时执行。由于 finally 是在 b() 内部的 Promise 链的末尾，所以它的回调会在 b() 返回的 Promise 解析之前执行。

输出顺序为：

1 // a().then((aR) => { console.log(aR); ... } 中的 console.log2 // b().then((bR) => { console.log(bR); } 中的 console.logA // a().finally(() => { console.log("A"); }) 中的 console.log

finally 回调在 a().then(...) 链的末尾执行，但是它不影响 b() 返回的 Promise 的解析顺序。因此，在 c() 的 then 回调中打印 2 的操作会在 finally 回调打印 "A" 之前发生。

简单来说，finally 回调执行的时间点是在当前 Promise 链的末尾，但在返回的 Promise 解析之前。在这个例子中，b() 返回一个 Promise，这个 Promise 在 a() 的 finally 回调执行后解析，所以在 c() 的 then 回调中，2 会先被打印，然后是 a() 的 finally 回调中的 "A"。