随着 JavaScript 前端技术的不断发展，Promise 已成为前端开发中常用的异步编程解决方案之一。ES9 中，Promise.prototype.finally() 方法被引入，为 Promise 添加了一种新的实例方法，本文将详细介绍该方法的使用技巧，并探讨其在实际开发中的作用。
Promise.prototype.finally() 方法的基本用法
Promise.prototype.finally() 方法是 Promise 实例的一个方法，它接收一个函数作为参数，该函数将在 Promise 状态最终确定时（即 Promise 被解决或被拒绝时）执行，而不管 Promise 的状态是解决还是拒绝。该方法的基本语法如下：
promiseInstance.finally(finalHandler)
其中，promiseInstance 是一个 Promise 实例，finalHandler 是一个回调函数，用来处理 Promise 状态最终确定时的情况。finalHandler 函数接收没有参数，也无论 Promise 的状态如何，都会执行。如果 Promise 被解决，则 finalHandler 函数的返回值将被忽略；如果 Promise 被拒绝，则会在 finalHandler 函数执行后继续传播拒绝原因。
下面是一个简单的示例，展示了 Promise.prototype.finally() 方法的基本用法：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
--------------- ---------
-- ------
---
-------
------------ -- -
--------------------
--
------------- -- -
----------------------
--
----------- -- -
-------------------- -------------
---该示例中，我们创建了一个 Promise 实例 promise，它会在 1 秒后被解决，并返回字符串 'Hello, World!'。然后，我们使用 promise.then() 方法注册了一个解决处理程序，用来打印结果。同时，我们也使用了 promise.catch() 方法注册了一个拒绝处理程序，用来打印拒绝原因。最后，我们还使用 promise.finally() 方法注册了一个最终处理程序，用来打印一条消息来标识 Promise 的结束。由于 Promise 被解决，因此 finalHandler 函数会被执行，并打印出 'Promise completed.' 的消息。
Promise.prototype.finally() 方法的实际应用
除了基本用法外，Promise.prototype.finally() 方法还有很多实际应用。下面，我们将介绍其中一些有用的用法，以及它们对于实际开发的指导意义。
执行清理操作
一个常见的应用场景是在 Promise 被解决或被拒绝时执行清理操作。比如，在发送 AJAX 请求后，我们需要手动清除 loading 状态，在使用 localStorage 时，需要手动关闭对应的数据库连接。此时，我们可以使用 Promise.prototype.finally() 方法注册一个最终处理程序，用来执行清理操作。
下面是一个简单的示例，展示了如何使用 Promise.prototype.finally() 方法执行清理操作：
-- -------------------- ---- -------
-------- -------------- -
--------------
---------------------
-------------- -- -
--------------------------
--
------------ -- -
---------------------
---------------
--
----------- -- -
--------------
---
-该示例中，我们定义了一个 loadUserData() 函数，用来从服务器加载用户数据。在函数内部，我们首先调用了 showLoading() 函数，用来显示 loading 状态。然后，我们使用 fetchDataFromServer() 函数从服务器获取用户数据，并使用 promise.then() 方法注册一个解决处理程序，用来显示用户数据。同时，我们也使用 promise.catch() 方法注册一个拒绝处理程序，用来打印出错误信息，并显示错误消息。最后，我们使用 promise.finally() 方法注册了一个最终处理程序，用来调用 hideLoading() 函数，用来隐藏 loading 状态。由于 Promise 可能被解决或被拒绝，因此 finalHandler 函数会在两种情况下都被执行，从而可以用来执行清理操作。
改善 Promise 链的可读性
另一个实际应用是使用 Promise.prototype.finally() 方法改善 Promise 链的可读性。在实际开发中，我们可能会构建一个非常复杂的 Promise 链，其中包含多个中间处理程序和错误处理程序。这时，我们可以使用 Promise.prototype.finally() 方法将处理程序链的最后一步骤提取出来，使代码更加易读。
下面是一个示例，展示了如何使用 Promise.prototype.finally() 方法改善 Promise 链的可读性：
-- -------------------- ---- -------
--------------
-------------- -- -
-- ------
--
------------ -- -
-- ------
--
------------ -- -
-- ------
--
------------ -- -
-- ------
--
------------ -- -
-- ----
--
----------- -- -
----------
---该示例中，我们定义了一个 Promise 链，其中包含多个中间处理程序和错误处理程序。最后，我们使用 promise.finally() 方法注册了一个最终处理程序，用来调用 cleanup() 函数，用来执行清理操作。由于 finalHandler 函数只会在 Promise 被解决或被拒绝时执行，因此可以保证代码的清晰度和易读性。
结论
Promise.prototype.finally() 方法是一个非常实用的方法，它可以用来执行清理操作，改善 Promise 链的可读性等多个方面。在实际开发中，我们应该熟练掌握该方法，并将其应用于相关的场景中。同时，我们也应该注意 finalHandler 函数返回值的处理，以充分利用该方法的优势。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670cfef55f551281025c2d4d