在 JavaScript 中，Promise 是一种非常有用的工具，用于解决异步编程中的回调地狱问题。Promise 最初在 ES6 中引入，随着时间的推移，它逐渐得到了改进和完善。其中一个改进是在 ES9 中引入的 Promise.finally 方法。本文将深入探讨 ES6 和 ES9 中的 Promise.finally 方法，以及它的使用方法和指导意义。
ES6 中的 Promise
在 ES6 中，Promise 可以是以下三种状态之一：
进行中 (pending)：Promise 对象刚刚被创建，还没有决定要执行哪种操作。
已完成 (fulfilled)：意味着执行操作已经成功完成，并返回一个值。
已拒绝 (rejected)：意味着执行操作遇到了问题，并返回一个错误。
当我们创建一个 Promise 对象时，可以使用 then() 方法来处理异步操作成功的结果，使用 catch() 方法来处理异步操作失败的结果。比如：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ------------- -- - -------------- -------- -- ------ --- ------------------- -- - -------------------- -------------- -- - ------------------- ---展开代码
在上面的代码中，使用 JavaScript 内置的 setTimeout() 方法模拟了一个异步操作，并在 2 秒后返回 hello world。Promise 对象的 then() 方法接收一个回调函数，当异步操作成功完成后，将执行该回调函数并将返回的结果作为参数传递给该函数。catch() 方法同理，只不过处理的是异步操作失败的情况。在上述例子中，由于异步操作执行成功，因此会打印 hello world。
ES9 中的 Promise.finally 方法
在 ES9 中引入了一个新的 Promise 方法，即 finally()，它允许我们为一个 Promise 在执行结束后设置一个回调函数，无论该 Promise 最终处于成功或失败状态，都将执行该回调函数。这个方法非常有用，可以用于执行比如清理资源之类的操作。比如：
promise.finally(() => { console.log('Promise operation finished.'); });
在上面的代码中，finally() 方法将打印字符串 Promise operation finished.，无论 Promise 对象执行成功还是失败。需要注意的是，finally() 方法返回的仍然是原 Promise 对象，因此可以链式调用其他方法。
Promise.finally 的使用举例
假设我们在开发一个电商平台，假设我们的购物车数据保存在 localStorage 中。当用户添加或删除某个商品时，我们需要执行一些特定的操作来确保数据的正确性。下面的代码演示了如何使用 finally() 方法在不同状态下执行特定的操作：
-- -------------------- ---- ------- -------- --------------- - ------ --- ----------------- ------- -- - ----- ---- - ---------------------------------------- -- --- ----- ------------ - ----------------- -- ---------- --- --------- -- -------------- - ------------------------ - ---- - ------------- - -- ---------------- - ---------------------------- ---------------------- ---------- --- - ----------- --- -- ----- -------- -- -- -------- -- - -------------------- ----- -- ---- ---------------- -- ------------ -- - --------------- ----- -------- ----- ------ ------- -- ----- - - ------- -- ----------- -- - ----------------- --------- ------------ ------------------ -- ----------- ---展开代码
在上面的代码中，我们首先从 localStorage 中获取购物车数据。如果购物车中已经存在该商品，则将其数量增加 1。否则，我们创建一个新条目并将其添加到购物车中。在添加操作完成后，我们将购物车数据保存回 localStorage 中，并使用 resolve() 方法表示操作成功完成。
在以上步骤完成后，我们打印相应的消息，无论是操作成功还是失败。如果操作失败，则使用 catch() 方法处理错误。在所有操作完成后，我们执行 updateCartCount() 函数来更新购物车图标上显示的数量。需要注意的是，在此示例中，updateCartCount() 函数在 finally() 方法后执行，因此无论操作成功还是失败都会执行。
指导意义
使用 Promise 对象可以避免回调地狱的问题，使代码更加简洁和可读。在 ES9 中引入的 finally() 方法为 Promise 对象提供了非常有用的功能。其允许我们在 Promise 执行完毕后执行清理操作，无论 Promise 最终状态如何。这个方法为处理异步操作的代码提供了便利，适用于包括但不限于清理资源和日志记录等操作。
在实际开发中，我们应该多加利用 Promise 对象及其方法来提高代码可读性、可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d83947a941bf7134eb6f7b
