ES9 追加 Promise.prototype.finally 是如何实现的？

在 ES9 中，Promise.prototype.finally 方法被正式加入到 Promise 原型链中，它允许你在 Promise 链式调用的最后一步添加一个回调函数，无论 Promise 是成功还是失败都会执行该回调函数。这篇文章将会介绍 Promise.prototype.finally 的实现方式，以及如何在实际开发中使用它。

Promise.prototype.finally 的实现方式

在 ES9 中，Promise.prototype.finally 方法的实现方式是在 Promise 原型链上添加一个新的方法。这个新方法会接收一个回调函数作为参数，并返回一个新的 Promise 对象。这个新的 Promise 对象会在原 Promise 对象的状态改变之后，执行回调函数并将原 Promise 对象的结果传递给新 Promise 对象。如果回调函数抛出了异常，新 Promise 对象将会被拒绝，并将异常原样抛出。

下面是 Promise.prototype.finally 方法的实现代码：

// javascriptcn.com 代码示例
Promise.prototype.finally = function (callback) {
  const p = this.constructor;
  return this.then(
    value => p.resolve(callback()).then(() => value),
    reason =>
      p.resolve(callback()).then(() => {
        throw reason;
      })
  );
};

如何使用 Promise.prototype.finally

在实际开发中，Promise.prototype.finally 方法可以被用于清理资源、取消网络请求等场景。下面是一个使用 Promise.prototype.finally 的示例代码，它演示了如何在网络请求结束后隐藏加载动画：

// javascriptcn.com 代码示例
showLoadingAnimation();

fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  })
  .finally(() => {
    hideLoadingAnimation();
  });

在上面的示例代码中，我们使用 Promise.prototype.finally 方法在网络请求结束后隐藏加载动画。不管请求成功还是失败，我们都可以通过 finally 方法隐藏加载动画，让用户感觉更加友好。

总结

ES9 中新增的 Promise.prototype.finally 方法可以让我们在 Promise 链式调用的最后一步添加一个回调函数，无论 Promise 是成功还是失败都会执行该回调函数。在实际开发中，Promise.prototype.finally 方法可以被用于清理资源、取消网络请求等场景。我们可以通过 finally 方法让用户感觉更加友好。

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