随着前端开发越来越复杂和多样化，我们需要更高效和可靠的方法来处理异步操作。Promise 对象是解决这个问题的主流方法之一，ES9 的新特性 Promise.prototype.finally() 可以更好地处理不管 Promise 是否成功都需要执行的操作，并且简化了代码逻辑。本文将详细介绍 Promise.prototype.finally() 的使用方法和指导意义，帮助你更好地学习和实践前端开发。
Promise 基础知识
Promise 是 JavaScript 中处理异步操作的一种方式。它可以代表一个异步操作的最终完成或失败，同时提供了一系列方法来处理异步操作。Promise 有三种状态：pending（等待中）、fulfilled（已完成）和 rejected（已失败）。
Promise 有两个重要的方法：
- then(): 处理 Promise 计算出的结果或处理 Promise 错误；
- catch(): 处理 Promise 错误；
使用 Promise 可以让我们更好地组织异步代码和处理错误，提高代码可读性和可维护性。
Promise.prototype.finally() 使用方法
Promise.prototype.finally() 是 ES9 中新增的 Promise 方法，它提供了一个能够不管 Promise 是否成功都需要执行的操作。
Promise.prototype.finally() 接收一个回调函数作为参数，并返回一个新的 Promise 对象，该对象会根据原始 Promise 对象的状态执行回调函数。该方法的语法如下：
promise.finally(onFinally);
其中 promise 是待处理的 Promise 对象，onFinally 是需要执行的回调函数。
回调函数 onFinally 将不接受任何参数，它只是用来记录或执行一些操作，不管 Promise 成功或失败都将执行。如果回调函数返回一个 Promise 对象，则该 Promise 对象的状态会影响返回的新 Promise 对象。如果回调函数抛出一个错误，则新 Promise 对象会 reject，并将错误传递给下一个 catch() 方法。
Promise.prototype.finally() 示例代码
让我们假设我们有一个函数，它返回一个 Promise 对象，用来从服务器上加载数据，并将数据展示在页面上。在数据加载完成之后，我们需要隐藏一个加载指示器，并禁用“未来”按钮，同时在任何情况下我们都需要禁用该按钮。我们可以通过使用 Promise.prototype.finally() 方法来做到这一点。
-- -------------------- ---- ------- -------- ---------- - -------------- -- ------- ---------------- -- -------- ------ ------------------------------------- ---------- -- - ------------------ -- ---- -- ------------ -- - ----------------- -- ------ -- ----------- -- - -------------- -- ------- ---------------- -- -------- --- -展开代码
在上面的代码中，调用了 loadData() 函数，它返回一个 Promise 对象。我们使用 showLoading() 和 disableButton() 函数分别来显示加载指示器和禁用“未来”按钮。
该函数使用 fetch() 方法来加载数据，并根据加载的数据来调用 displayData() 函数或 showError() 函数。在任何情况下，我们使用 finally() 方法来执行 hideLoading() 和 disableButton() 函数。
使用 finally() 方法简化了我们的代码，在 Promise 成功或失败的情况下提供相同的行为。不用担心忘记在 Promise 的每个分支中执行这些操作。
Promise.prototype.finally() 指导意义
使用 Promise.prototype.finally() 可以简化我们的代码，同时提供了一个通用的方法，用来在 Promise 完成或失败时执行操作。不再需要在 Promise 的每个分支中重复同样的代码，同时可以更好地组织和处理异步操作，提高代码的可读性和可维护性。
但请注意，在使用 Promise.prototype.finally() 时需要注意回调函数的行为，以及对新 Promise 对象状态的影响。如果回调函数返回一个 Promise 对象，则需要根据返回的 Promise 对象状态来处理新 Promise 对象状态。如果回调函数抛出一个错误，则需要使用 catch() 方法来处理错误。只有在理解并正确使用 Promise.prototype.finally() 时，它才能真正地提高我们的代码质量和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c25c66314edc2684b886d2
