在前端开发中，异步代码是常见且必不可少的，比如 AJAX 请求、定时器等等。而处理异步代码的难点在于，无法控制异步操作的完成顺序，导致代码难以协调和维护。
为解决这个问题，ECMAScript 2019 中引入了 Promise.finally() 这个新特性。它提供了一种方法，用于指定不管 Promise 对象最后状态如何，都会执行的操作。本篇文章将详细介绍 Promise.finally() 的使用方法和其优势。
Promise
在介绍 Promise.finally() 之前，我们先了解一下 Promise。
Promise 是 ECMAScript 6 中新增的一个对象，用于处理异步操作。它有三种状态：Pending（进行中）、Fulfilled（已完成）和Rejected（已失败）。
当一个 Promise 对象变成 Fulfilled（已完成）状态，就会调用 then() 方法；如果变成 Rejected（已失败）状态，则会调用 catch() 方法。而基于这一特点，可以通过链式调用 then() 方法和 catch() 方法，将异步代码串联起来，实现顺序控制和错误处理。
例如，下面的代码通过 Promise 实现了一个异步查询操作：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
-- ------
--- --- - -----------
-- ----- -
------------
- ---- -
--------------
-
--
-
-------------------- -- -
-- ---------
----------------
------------ -- -
-- ---------
------------------
--Promise.finally()
在上面的示例代码中，无论最终是成功还是失败，我们都可以在 then() 和 catch() 方法中编写逻辑，但如果需要在 Promise 结束时执行某个逻辑呢？
这时就可以使用 Promise.finally() 方法，它提供了一种无论 Promise 对象最终状态如何，都会在最后被执行的操作。这有助于处理一些需要在 Promise 成功或失败结束时进行的清理工作，比如关闭数据库连接、释放资源等等。
下面是 Promise.finally() 方法的语法形式：
promise.finally(onFinally)
其中，promise 是 Promise 实例对象，onFinally 是一个函数，无论 Promise 实例对象的状态为 Fulfilled 还是 Rejected，都会在 Promise 结束后执行。它接收 Promise 实例对象状态为 Fulfilled 或 Rejected 时的返回结果。
例如，我们可以通过 Promise.finally() 在查询数据完成后输出一条日志：
queryData().then(res => {
console.log(res)
}).catch(err => {
console.error(err)
}).finally({
console.log('查询结束')
})Promise.finally() 的优势
Promise.finally() 的引入，不仅简化了代码的编写，还提供了以下优势：
- 可以统一处理代码的收尾工作。无论成功还是失败，都可以执行相应的收尾操作，提高代码的可维护性。
- 支持嵌套调用，可以将多个 then() 和 catch() 方法进行链式调用。
- 可以使用 try-catch 结构处理同步代码和异步代码的异常。
例如，我们可以通过 Promise.finally() 简化前面的查询数据示例代码，如下所示：
queryData().then(res => {
console.log(res)
}).catch(err => {
console.error(err)
}).finally({
closeConnection()
})总结
Promise.finally() 是 ECMAScript 2019 中新增的一个功能，它可以让开发者无论 Promise 实例对象最终的状态如何，都能在 Promise 结束时进行相应的操作。这对于处理一些需要在 Promise 成功或失败结束时进行的清理工作非常有用。
使用 Promise.finally() 不仅能让代码更加简洁高效，还可以提高代码可维护性，支持嵌套调用，同时还支持同步代码和异步代码的异常处理。因此，建议在实际开发中采用 Promise.finally() 来简化异步代码的处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e97df5f6b2d6eab34c40fd