ES10 中的新特性：Promise.prototype.finally() 的实战应用
在前端开发中，异步操作是不可避免的。而 Promise 对象，是一种用于处理异步操作的标准化解决方案，其可以优雅地处理异步回调地狱问题。在 ES10 中，Promise 对象新增了一个实用的方法：Promise.prototype.finally()，本文将介绍其用法及实战应用。
Promise.prototype.finally() 方法
Promise.prototype.finally() 方法返回一个新的 Promise 对象，该对象在 Promise 对象状态改变后（无论是 resolve 还是 reject），都会执行指定的回调函数。该方法带有一个函数参数，该函数会在 Promise 对象已经 settled（即变成fulfilled 或 rejected）后被调用。该方法主要用于无论 promise 被 reject 还是 resolve 都要执行的任务。
Promise.prototype.finally(onFinally)
参数：onFinally 是当 Promise 对象 settle 时要调用的函数。
返回值：返回一个新的 Promise 对象。
实战应用
下面我们将以实际应用中常见的场景为例，来介绍 Promise.prototype.finally() 的使用方法。
场景：Ajax 请求数据时，在请求的过程中需要显示一个加载中的提示，请求完成后需要隐藏该提示。
传统方法：
我们可以定义一个 showLoading 和 hideLoading 方法，用于显示和隐藏加载提示：
function showLoading() { // 显示加载提示 } function hideLoading() { // 隐藏加载提示 }
然后在请求的过程中，则需要手动调用这两个方法：
-- -------------------- ---- ------- -------------- ------------- --------------------- -- ------ -- ----------------------- -- ------ -- ------------------- -------------- ---展开代码
可以看到，在 Promise 对象中使用传统的方式，代码会变得很冗长。而使用 Promise.prototype.finally() 方法，可以有效地简化代码，实现如下：
-- -------------------- ---- ------- -------------- ------------- -------------------- - -- ------ -- ----------------------- - -- ------ -- ------------------- - -------------- ---展开代码
可以看到，使用 Promise.prototype.finally() 方法可以简化代码，更加优雅。
还有一个实际应用的例子是对请求时的状态进行更详细的输出，例如，前端请求数据时，需要打印请求参数，请求地址以及请求响应结果。这时，可以使用 Promise.prototype.finally() 方法来实现这一需求：
-- -------------------- ---- ------- -------- ------------- ------- - ------------------------- ----------------- -------------- ---------- ------- -------------- -- ---------------- ---------- -- - ------------------------- ------ -- -------- -- ------------ -- - -------------------------- ------- -- ------ -- ----------- -- - -------------- --- -展开代码
在这里我们通过 console.log 输出了请求地址和参数，并在请求成功和失败时分别输出了响应和错误信息。
总结
在实际开发中，Promise 对象是不可避免的，而 Promise.prototype.finally() 方法的出现，旨在帮助开发者更加优雅地处理一些无论 resolve 还是 reject 时都需要执行的任务。在本文中，我们通过实际场景的演示，掌握了 Promise.prototype.finally() 方法的使用，希望能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659e3142add4f0e0ff73eac3
