ES9 中的 Promise.prototype.finally 详解，以及理解日常使用场景-JavaScript中文网-JavaScript教程资源分享门户

在 ES9（ECMAScript 2018）中，Promise 新增加了一个实例方法 Promise.prototype.finally，它允许你在一个 Promise 链中添加一个在 Promise 被 resolve 或 reject 后都会执行的回调函数。

语法

Promise.prototype.finally 方法的语法如下：

promise.finally(onFinally)

其中，promise 是要添加 finally 方法的 Promise 对象，onFinally 是一个回调函数，它会在 Promise 被 resolve 或 reject 后都会执行。回调函数 onFinally 接受一个参数，即前一个 Promise 的 resolve 或 reject 值。

日常使用场景

JavaScript 的 Promise 对象常常用于处理异步操作，例如从服务器请求数据、读写文件等。在 Promise 的链式调用中，通常需要进行一些收尾工作，无论 Promise 成功还是失败，这些工作都需要被执行。

而 Promise.prototype.finally 方法就是用来解决这个问题的。下面是一个案例：

// javascriptcn.com 代码示例
fetch(url)
  .then(response => response.json())
  .then(data => {
    // 处理请求成功的数据
  })
  .catch(error => {
    // 处理请求失败的情况
  })
  .finally(() => {
    // 关闭 loading 界面
  })

假设我们想从服务器请求数据并且在请求成功或失败后都需要关闭 loading 界面，我们可以将关闭 loading 界面的代码写在 finally 方法中。

实际示例

接下来，我们来看看一个实际的案例。

假设我们需要从服务器请求一份 JSON 数据，然后通过 DOM API 将数据渲染到页面上。同时，我们需要在请求成功或失败后都需要关闭 loading 界面。下面是代码：

// javascriptcn.com 代码示例
const showLoading = () => {
  // 显示 loading 界面
}

const hideLoading = () => {
  // 隐藏 loading 界面
}

const renderData = data => {
  // 渲染数据到页面上
}

const handleError = error => {
  // 处理请求失败的情况
}

showLoading()

fetch('url/to/json')
  .then(response => response.json())
  .then(data => {
    renderData(data)
  })
  .catch(handleError)
  .finally(() => {
    hideLoading()
  })

我们首先定义了两个方法 showLoading 和 hideLoading，它们用于显示和隐藏 loading 界面。然后定义了一个方法 renderData，该方法用于渲染数据。最后，我们定义了一个方法 handleError，该方法用于处理请求失败的情况。

在代码中，我们使用 showLoading 方法显示 loading 界面，然后发起请求。如果请求成功，我们将数据传递给 renderData 方法进行渲染。如果请求失败，则调用 handleError 方法进行处理。无论请求成功或失败，我们都需要调用 hideLoading 方法隐藏 loading 界面。这些代码都被包含在 finally 方法中。

总结

ES9 中的 Promise.prototype.finally 方法允许在一个 Promise 链中添加一个在 Promise 被 resolve 或 reject 后都会执行的回调函数。这个方法通常用于处理一些收尾工作，例如关闭 loading 界面等。在实践中，我们可以将经常重复使用的代码写在 finally 回调函数中，以提高代码的可读性和可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e39b67d4982a6ebf468d7