在 ES2018 和 ES2019 中使用 Promise.prototype.finally() 优雅地处理异步业务逻辑
异步编程是前端开发中不可避免的一部分，而 Promise 则是处理异步操作的重要手段之一。在 ES2018 和 ES2019 中，Promise 也得到了进一步的增强，其中 Promise.prototype.finally() 方法就是一项非常实用的功能。本文将详细介绍 Promise.prototype.finally() 的使用方法及其在实际开发中的应用。
1、 Promise.prototype.finally() 的基本用法
Promise.prototype.finally() 方法是 Promise 原型对象的一个新方法，它接受一个函数作为参数，并在 Promise 完成时被调用，无论 Promise 的状态是成功还是失败都会被执行。它的基本用法如下所示：
promise.finally(onFinally);
其中，promise 表示一个 Promise 对象，onFinally 则是一个函数，它会在 Promise 的状态发生变化时被执行。
接下来我们通过一个简单的实例来了解 Promise.prototype.finally() 方法的具体用法：
-- -------------------- ---- -------
-------- ---------- -
------ --- ----------------- ------- -- -
------------- -- -
------------- -----------
-- ------
---
-
----------
-------- -- -
----------------- ---- ----------
--
------------ -- -
-------------------
--
----------- -- -
----------------- ------- ------------
---上述代码中，我们创建了一个 Promise 对象 readFile()，在该对象中我们模拟了一个异步操作并在 1 秒钟后返回一个错误信息。接着我们对该 Promise 对象进行了处理，当它成功时输出 "Read file success"，当它失败时输出对应的错误信息，最后在任何情况下都输出 "File reading completed"。
2、Promise.prototype.finally() 的具体应用
在实际开发中，Promise.prototype.finally() 方法可以用来处理一些异步操作的业务逻辑，例如：在发起网络请求时显示请求状态，无论请求成功或者失败都要隐藏请求状态等等。
下面我们通过一个简单的网络请求实例来了解具体的应用方法：
-- -------------------- ---- -------
-------- ----------- -
-- -------
--------------
------ ---------------------------------------
--------- -- -----------
---------- -- -
-- ------
------------------
--
------------ -- -
-- ------
--------------------
--
----------- -- -
-- -------
--------------
---
-上述代码中，我们定义了一个 fetchData() 函数用来发起网络请求，在该函数中，我们使用 fetch() 方法获取数据，并在请求成功时处理数据，请求失败时处理错误信息，并在请求完成后隐藏请求状态。
由于 Promise.prototype.finally() 在无论 Promise 的状态是成功还是失败都会被执行，因此在 fetchData() 函数中无论成功与否都会触发隐藏请求状态的操作，从而提高了代码的复用性和可维护性。
3、Promise.prototype.finally() 的注意事项
在使用 Promise.prototype.finally() 方法时需要注意以下几点：
- .finally() 并不会改变 Promise 的状态和传递数据。
- .finally() 中不能直接操作 Promise 对象的返回值，如果需要修改返回值，则应该返回一个新的 Promise 对象。
- .finally() 中不能抛出错误，否则会影响后续的 Promise 链式调用。
下面是一些常见的错误用法：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
-- ---------------- ----- ------- --------
--------
----------- -- -
-------------------- ----
------ -------- ---
--
---------- -- -
------------------ -- -- ---------
---
-- ---------------- ------- ------- ------
--------
----------- -- -
-------------------- ----
------ --- ----------------- ------- -- -
---------------- ----
---
--
---------- -- -
------------------ -- -- ---------
---
-- ---------------- -------
--------
----------- -- -
-------------------- ----
----- --- -------------- ----
--
---------- -- -
------------------
--
------------ -- -
------------------- -- -- -------- --
---4、总结
在 ES2018 和 ES2019 这两个版本中，Promise.prototype.finally() 方法是开发者比较期待的一项功能。该方法能够让我们更优雅地处理异步业务逻辑，有效提高了代码的复用性和可维护性。
然而，在使用 Promise.prototype.finally() 的时候，我们也需要注意一些细节，避免出现一些常见的使用错误。
最后，我们可以在实际开发中灵活应用 Promise.prototype.finally() 方法，增强代码的可读性和可维护性，并提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c713d810032fedd3905fac