了解 ES8: Promise.prototype.finally() 的实战与拓展-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Promise 是一个非常常用的异步编程解决方案。在 ES6 中，Promise 已经被正式纳入 JavaScript 的标准库中，简化了异步操作的处理流程。而在 ES8 中，Promise 又新增了一个非常实用的方法：Promise.prototype.finally()。

Promise.prototype.finally() 的作用

Promise.prototype.finally() 方法接收一个回调函数，当 Promise 状态变为 resolved 或 rejected 时，该回调函数都会被执行。无论 Promise 的状态如何，finally() 方法都会执行，而且不会改变 Promise 的状态。

Promise.prototype.finally() 方法可以用来处理一些无论 Promise 成功或失败都需要执行的逻辑，比如关闭文件流、释放资源等操作。

Promise.prototype.finally() 的语法

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

promise.finally(onFinally)

其中，promise 表示要操作的 Promise 对象，onFinally 表示要执行的回调函数。

Promise.prototype.finally() 的实战应用

下面我们来看一个实际的应用场景，假设我们需要从后端获取一些数据，然后在页面上进行展示。在获取数据时，我们需要显示一个 loading 动画，无论获取成功还是失败，都需要关闭 loading 动画。这个时候，就可以使用 Promise.prototype.finally() 方法来实现。

// javascriptcn.com 代码示例
function getData() {
  showLoading();
  return fetch('http://example.com/data')
    .then(response => response.json())
    .then(data => {
      hideLoading();
      renderData(data);
    })
    .catch(error => {
      hideLoading();
      showError(error);
    })
    .finally(() => {
      console.log('请求结束');
    });
}

在上面的代码中，我们使用了 Promise.prototype.finally() 方法来输出一个日志，表示请求结束。无论请求成功还是失败，都会执行该回调函数。

Promise.prototype.finally() 的拓展应用

除了上面的应用场景，Promise.prototype.finally() 方法还可以用来实现一些高级的异步编程技巧。比如，我们可以使用 Promise.prototype.finally() 方法来实现一个类似于 try-catch-finally 的结构。

// javascriptcn.com 代码示例
function fetchData() {
  return fetch('http://example.com/data')
    .then(response => response.json())
    .catch(error => {
      console.log('发生错误：', error);
      throw error;
    })
    .finally(() => {
      console.log('请求结束');
    });
}

fetchData()
  .then(data => {
    console.log('获取数据成功：', data);
  })
  .catch(error => {
    console.log('获取数据失败：', error);
  });

在上面的代码中，我们在 Promise.prototype.catch() 方法中抛出了一个错误，然后在 Promise.prototype.finally() 方法中输出了一个日志。由于 Promise.prototype.catch() 方法返回的是一个新的 Promise 对象，因此在后面的 then() 方法中仍然可以捕获到错误。

总结

Promise.prototype.finally() 方法是 ES8 中新增的一个非常实用的方法，它可以用来处理无论 Promise 成功或失败都需要执行的逻辑。在实际开发中，我们可以使用 Promise.prototype.finally() 方法来简化代码，提高代码的可读性和可维护性。同时，Promise.prototype.finally() 方法还可以用来实现一些高级的异步编程技巧，让我们的代码更加优雅。

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