当前位置：首页 > news >正文

深度解读Promise.prototype.finally

news 2025/8/26 5:11:20

由一个问题引发的血案：

手写源码实现Promise.prototype.finally。

我们知道，对于promise来讲，当状态敲定，无论状态兑现或拒绝时都需要调用的函数，可以使用Promise.prototype.finally的回调来实现。那么如何手写实现Promise.prototype.finally呢？问题恐怕并不很简单，本文主要做finally的细节和实现做一些详细的解读。

finally解决了什么问题

这可以让你避免在 promise 的 then() 和 catch() 处理器中重复编写代码。

以上为mdn中关于finally作用的解释。

finally的返回值

立即返回一个等效的 Promise 对象。

即finally返回的仍然是一个promise。

finally具体是怎么实现的

finally() 在内部调用其调用对象上的 then 方法。

这给了我们模拟实现finally的思路：即我们调用then方法即可：

Promise.prototype.finally = function (onFinally) {return this.then((value) => {},(err) => {});
}

finally回调接收什么参数

就Promise.prototype.finally(onFinally)而言：

onFinally 回调函数不接收任何参数。这种情况恰好适用于你不关心拒绝原因或兑现值的情况，因此无需提供它。

因此，我们可以对上面的代码增加回调执行，这只需要再then的两个回调中都调用即可，如下：

Promise.prototype.finally = function (onFinally) {return this.then((value) => {onFinally();});}, (err) => {onFinally();});
}

以上代码有一个问题：

即虽然我们实现了无论兑现或者拒绝都调用 onFinally回调，但是不能保证onFinally返回一个新的promise时，onFinally已经执行完毕。

解决方案是使用Promise.resolve包裹一层，如下：

Promise.prototype.finally = function (onFinally) {return this.then((value) => {Promise.resolve(onFinally()).then(() => {});}, (err) => {Promise.resolve(onFinally()).then(() => {});});
}

finally如何链式传递值

在上面的代码中，我们已经实现了无论promise兑现或拒绝都调用同一个回调，这看起来似乎已经达成了目标，但不要忘了，我们的finally仍然返回一个promise。

这个返回的promise如何接收之前的promise的值，又如何传递值给后面的promise，就成为了最重要的问题。

因此，工作还没有结束！对于返回值，mdn给出了说明：

返回等效的 Promise。如果处理程序抛出错误或返回被拒绝的 promise，那么 finally() 返回的 promise 将以该值被拒绝。否则，处理程序的返回值不会影响原始 promise 的状态。

finally() 调用通常是透明的，不会更改原始 promise 的状态。例如：
与 Promise.resolve(2).then(() => 77, () => {}) 不同，它返回一个最终会兑现为值 77 的 promise，而 Promise.resolve(2).finally(() => 77) 返回一个最终兑现为值 2 的 promise。
类似地，与 Promise.reject(3).then(() => {}, () => 88) 不同，它返回一个最终兑现为值 88 的 promise，而 Promise.reject(3).finally(() => 88) 返回一个最终以原因 3 拒绝的 promise。

也就是说finally返回的新promise，与onFinally回调的返回值没有关系，而是透明传递之前的promise的值。因此上面的代码变为：

Promise.prototype.finally = function (onFinally) {return this.then((value) => {return Promise.resolve(onFinally()).then(() => {return value;});}, (err) => {return Promise.resolve(onFinally()).then(() => {throw err;});});
}