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

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

1
A
2

但实际输出却是

1
2
A

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

---

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

---

2024.6.24 14:50 更新：

首先感谢各位的答疑解惑，受益匪浅。

在上面的代码中，我觉得输出 1 A 2 是认为，当c中运行 b() 时调用了函数b，b中运行了a，并进入then逻辑输出1，then完毕后执行finally输出A，此时b()运行完毕，输出b的返回结果2，所以顺序是 1 A 2。

这里思考的逻辑我参考的是Java中的try catch finally。但现在我发现这本质上有所区别，应该结合浏览器的微队列，以及Promise的then与finally都会返回一个Promise对象并将其放到微队列中等待执行，其执行顺序则与放入微队列的先后顺序有关。

在b中，当a()运行得到返回结果1后，进入then逻辑输出了1，并返回了2，此时其实已经将结果封装为Promise对象并放入微队列中，后续finally的内容虽然也会封装为Promise对象并放入微队列，但并不会对前者造成影响。
所以此时在c中调用b()并得到结果时，就会立即运行后续代码，而不会等待finally的执行，因此实际运行时才会输出 1 2 A 。

当然，我现在也是对着答案想原因，下次遇到也不知道能不能在看到答案前想明白。

最后，再次感谢各位。

Answer 1

（以下的 queue 都指 microtask queue）

注意到

    a()
      .then((aR) => {
        console.log(aR);
        resolve(2);
      })
      .finally(() => {
        console.log("A");
      });

这是链式调用，a().then(...) 返回一个 Promise，等这个 Promise fulfill 才会输出 A，而不是 a() fulfill 之后。这样的话 resolve(2) 会先一步把 b().then 放入 queue，然后才 resolve a().then，然后再把这个 a().finally 放入 queue

写成这样会明白很多：

const f = () => {
  const a = new Promise((resolve) => {
    const cb1 = (result1) => {
      console.log(result1)
      resolve(2)
    }
    const cbA = () => console.log('A')
    const b = Promise.resolve(1)
    const c = b.then(cb1)
    c.finally(cbA)
  })
  return a
}

const cb2 = (result2) => console.log(result2)
f()
  .then(cb2)

执行过程是这样的：

1. 开始执行 f
2. 开始执行 a
3. b 立即被 fulfill，导致 cb1 进入 queue，现在 queue = [cb1]
4. c 进入 queue
5. f 返回
6. 开始执行 queue 中的函数 cb1，现在 queue = []
7. 输出 1，resolve a，导致 cb2 进入 queue，现在 queue = [cb2]
8. cb1 执行结束，导致 c 被 resolve，导致 cbA 进入 queue，现在 queue = [cb2, cbA]
9. 开始执行 queue 中的函数 cb2，现在 queue = [cbA]
10. 输出 2
11. 开始执行 queue 中的函数 cbA，现在 queue = []
12. 输出 A，当前 tick 结束

Answer 2

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

Answer 3

看看 Promise.prototype.finally() - JavaScript | MDN (mozilla.org)

finally 设计的本意就是在 then 或 catch 之后调用，不管是 resolve 还是 reject 都会触发，避免在 then 和 catch 中写重复代码。所以

a().then().finally() 就是先 then 再 finally 啊。

---

用 async/await 的方式来写这段代码，就可以看到类似 try ... catch 的逻辑

const a = async () => {
    return await Promise.resolve(1);
};

const b = async () => {
    try {
        const aR = await a();
        console.log(aR);
        console.log(2);
    } finally {
        console.log("A");
    }
};

const c = async () => {
    const bR = await b();
    console.log(bR);
};

c();