巧用Promise.prototype.finally()在ES2018和ES2019中高效编写代码

2023-10-16 11:09:02

SEO关键词：

了解Promise.prototype.finally()如何让ES2018和ES2019的异步编程变得更加简单，从而提高编码效率。

正文

在ES2018和ES2019中，Promise.prototype.finally()提案为JavaScript带来了一个新的方法，允许开发者在Promise链的最后添加一个函数，无论Promise的结果是成功还是失败，该函数都会被调用。这种新的特性让异步编程变得更加简单和高效，本文将对Promise.prototype.finally()进行详细讲解，并提供示例代码帮助您理解其用法。

Promise.prototype.finally() 的语法

Promise.prototype.finally()方法接受一个函数作为参数，该函数将在Promise链的最后调用。函数的签名如下：

finally(onFinally)

其中，onFinally是一个函数，无论Promise的结果是成功还是失败，都会被调用。

Promise.prototype.finally() 的用法

Promise.prototype.finally()方法可以在任何Promise链中使用。以下是一些常见的用法：

确保清理工作始终被执行 ：即使Promise被拒绝，您也可以使用finally()方法来确保清理工作始终被执行。例如，您可以使用finally()方法来关闭文件、释放资源等。
显示加载指示器 ：您可以在Promise链的开始处使用finally()方法来显示加载指示器，并在finally()方法中隐藏加载指示器。这样，无论Promise的结果是成功还是失败，加载指示器都会被隐藏。
记录错误 ：您可以在Promise链的最后使用finally()方法来记录错误。这样，您可以轻松地跟踪错误并进行调试。

Promise.prototype.finally() 的示例

以下是一些Promise.prototype.finally()的示例代码：

// 确保清理工作始终被执行
fetch('https://example.com/api/data')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  })
  .finally(() => {
    // 关闭文件、释放资源等
  });

// 显示加载指示器
const loadingIndicator = document.getElementById('loading-indicator');

fetch('https://example.com/api/data')
  .then(response => {
    // 处理响应
    loadingIndicator.style.display = 'none';
  })
  .catch(error => {
    // 处理错误
    loadingIndicator.style.display = 'none';
  })
  .finally(() => {
    loadingIndicator.style.display = 'none';
  });

// 记录错误
const errorLog = document.getElementById('error-log');

fetch('https://example.com/api/data')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
    errorLog.innerText = error.message;
  })
  .finally(() => {
    // 记录错误
    console.error(error);
  });