深度解读Promise.prototype.finally

由一个问题引发的血案：

手写源码实现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方法即可：

javascript 复制代码

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

finally回调接收什么参数

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

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

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

javascript 复制代码

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

以上代码有一个问题：

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

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

javascript 复制代码

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的值。因此上面的代码变为：

javascript 复制代码

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

关于三层return的解释

第一层return：finally的返回值。

通过调用then得到一个新的promise，并将其作为返回值。如果没有这个return，整个finally就没有返回值。

第二层return：then的返回值。

如果没有这个return，then将以undefined作为返回的promise的兑现值，这显然不符合预期。这里显然应该是返回一个新promise，新promise应该将之前的promise的值透明传递。

第三层return：新promise的传递值。

根据透明传递，因此对于value直接return value；对于err，则直接throw err；

全文完。