在Web前端开发中，异步操作非常常见，我们经常需要使用Promise来处理异步请求结果。但是，在Promise中，可能会出现一种情况，即多层嵌套的回调函数，也就是所谓的“回调地狱”，这种代码结构容易导致可读性和可维护性差、代码冗长等问题。
ES8的Promise.finally提供了一种不管Promise是成功还是失败都会执行的函数，从而帮助我们解决这些问题。
Promise.finally的使用
Promise有三种状态：pending、fulfilled和rejected。Promise.finally不管Promise的状态如何，都会执行指定的函数。
Promise.finally的语法如下：
promise.finally(onFinally)
其中，promise表示要执行的Promise，onFinally是一个可选的回调函数，当Promise状态发生变化时，该函数会被调用。
onFinally函数不接受任何参数，它只是在Promise状态发生变化后被调用，用于清理工作或其他必要的操作。如果onFinally函数返回一个新的Promise，那么它将成为Promise.finally返回的Promise。
下面是一个使用Promise.finally的示例：
-- -------------------- ---- ------- -------- --------------- - ------ ------------------- -------------- -- - -- ------- ------ ---------------- -- ------------ -- - -- ---- --------------------- -- ----------- -- - -- ----------- ------------------ ----------- --- -展开代码
在这个示例中，我们使用fetch函数获取一些数据，然后使用Promise的then和catch方法处理成功和失败的情况。通过在最后添加finally函数，我们可以确保无论如何，善后工作都会得到执行。
Promise.finally的实现原理
Promise.finally实现的关键在于它不会改变Promise的状态，而是等待Promise完成后执行指定的函数。
Promise.finally的实现可以采用同步方式或异步方式，具体取决于onFinally函数是否返回一个Promise。
下面是一个使用同步方式实现的Promise.finally：
Promise.prototype.finally = function(onFinally) { return this.then( result => Promise.resolve(onFinally()).then(() => result), error => Promise.resolve(onFinally()).then(() => { throw error; }) ); };
在这个实现中，我们使用了Promise的then方法。当Promise成功时，我们首先调用onFinally函数，然后返回原始结果；当Promise失败时，我们也首先调用onFinally函数，然后通过抛出错误来传递失败状态。
如果onFinally函数返回一个Promise，那么我们需要采用异步方式实现Promise.finally。下面是一个使用异步方式实现的Promise.finally：
Promise.prototype.finally = function(onFinally) { return this.then( result => Promise.resolve(onFinally()).then(() => result), error => Promise.resolve(onFinally()).then(() => Promise.reject(error)) ); };
在这个实现中，我们使用了Promise.resolve和Promise.reject方法将结果传递给onFinally函数，并在等待onFinally函数执行完成后继续传递结果或错误。
小结
ES8的Promise.finally提供了一种不管Promise状态如何都会执行的函数，帮助我们解决了回调地狱的问题。使用Promise.finally可以让我们在Promise完成后执行必要的操作，从而提高代码的可读性和可维护性。
在实现Promise.finally时，我们需要注意使用同步方式或异步方式，具体取决于onFinally函数是否返回一个Promise。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb3388306f20b3a6a93728
