在前端开发中，我们经常需要处理异步事件，例如向服务器发起请求等。在 ES6 中，引入了 Promise 这一概念，为异步事件处理提供了极大的便利。随着 ES8 的发布，Promise 对象也得到了进一步的增强，其中包括 Promise.finally() 方法。本文将详细介绍如何使用 Promise.finally() 方法来处理异步事件。
什么是 Promise.finally() 方法
Promise.finally() 方法是 ES8 中新增的 Promise 原型方法，用于注册一个在 Promise 对象执行完毕后无论成功与否都会执行的回调函数。
Promise.finally() 方法的语法
Promise.finally() 方法的语法如下：
promise.finally(onFinally)
其中，promise 是一个 Promise 实例，onFinally 是一个回调函数。
Promise.finally() 方法的实现原理
Promise.finally() 方法的实现原理是通过在 Promise 实例上注册一个 finally 微任务，在 Promise 实例的状态发生变化（不论是 resolved 还是 rejected）时，无论前面的回调函数是否返回 Promise 对象，finally 微任务都会被执行。
如何使用 Promise.finally() 方法
我们来看一个例子，假设我们需要向服务器发起一个 POST 请求，需要在请求前显示一个 loading 框，请求完成后需要将 loading 框隐藏。代码如下：
-- -------------------- ---- -------
-------- ---------------- ----- -
--------------
------ ---------- -
------- -------
----- --------------------
--
-------------- -- -
--------------
------ ----------------
--
------------ -- -
--------------
----- ------
---
-这个函数中，我们使用 Promise 对象封装了该请求，并在请求前调用 showLoading() 方法显示 loading 框，在请求完成后调用 hideLoading() 方法隐藏 loading 框。
现在，我们想要在请求完成后不仅要隐藏 loading 框，还要在控制台输出一条日志。我们可以使用 Promise.finally() 方法，将输出控制台日志的操作放入 finally 中。代码如下：
-- -------------------- ---- -------
-------- ---------------- ----- -
--------------
------ ---------- -
------- -------
----- --------------------
--
-------------- -- ----------------
------------ -- -
----- ------
--
----------- -- -
--------------
--------------------
---
-在这个代码中，我们在最后一个 then() 方法后使用了 finally() 方法，将 hideLoading() 和 console.log() 方法放入 finally() 方法内。这样，在请求完成后，无论请求是否成功，都会执行 finally() 方法内的代码。
Promise.finally() 方法的错误处理
Promise.finally() 方法没有改变 Promise 实例的状态，因此不会导致异常发生。但是，如果 finally() 方法内部抛出异常，则这个异常会被传递到下一个 catch() 方法中。例如：
Promise.resolve(1)
.finally(() => {
throw new Error("finally error");
})
.catch(error => {
console.log(error.message); // finally error
});在这个例子中，finally() 方法内部抛出了一个 Error 对象，由于没有任何的 catch() 方法处理该 Error，它会被传递到下一个 catch() 方法中。
结论
使用 Promise.finally() 方法可以方便地统一管理异步事件的状态，使代码更加简洁和可读。但需要注意，finally() 方法内部的异常处理需要根据实际业务需求合理控制处理方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719aa6dad1e889fe232779c