深入理解 Promise 错误处理：为何捕获异常至关重要

在 javascript 异步编程中，promise 已经成为处理异步操作的核心机制。然而，许多开发者在实践中，尤其是在使用像 @typescript-eslint/no-floating-promises 这样的 linter 规则时，会遇到一个常见困惑：为什么即使我不需要特定的错误处理逻辑，或者只是简单地将错误重新抛出，linter 仍然要求我为 promise 链添加 .catch() 块？例如，以下代码片段会触发 linter 警告：

functionReturningPromise()
    .then(retVal => doSomething(retVal));

而为了“满足”Linter，一些开发者可能会采取如下形式：

functionReturningPromise()
    .then((retVal) => doSomething(retVal))
    .catch((error) => {
        throw error;
    });

这种做法似乎只是为了消除警告，因为从控制台输出看，无论是否添加上述 catch 块，错误最终都会被抛出。然而，这种理解忽略了 Promise 错误处理在不同运行环境下的行为差异以及对应用健壮性和用户体验的关键影响。

Promise 未处理拒绝的行为差异：Node.js 与浏览器

Promise 的未处理拒绝（unhandled promise rejection）在不同的 JavaScript 运行时环境中，其行为有着显著的区别。

浏览器环境

在浏览器中，当一个 Promise 被拒绝但其错误未被任何 .catch() 块捕获时，浏览器通常会记录一个“未捕获的 Promise 拒绝”错误到控制台，但程序的执行并不会因此中断。这意味着，即使存在未处理的 Promise 错误，应用程序的其余部分仍将继续运行。

例如：

Promise.reject('Something went wrong!');
setTimeout(() => console.log('hello from browser'), 1000);

在浏览器中运行这段代码，你会在控制台看到一个错误消息，但一秒后 hello from browser 仍然会被打印出来。

Node.js 环境（v15 及更高版本）

与浏览器不同，Node.js 对未处理的 Promise 拒绝采取了更为严格的策略。从 Node.js v15 版本开始，未处理的 Promise 拒绝被视为一个“硬错误”（HARD ERROR），它将导致整个进程立即退出！这意味着任何未被捕获的 Promise 错误都会直接终止应用程序的运行。

让我们通过一个示例来验证这一点：

Promise.reject(); // 一个未处理的 Promise 拒绝
setTimeout(() => console.log('hello from Node.js'), 1000);

在 Node.js 环境中执行上述代码：

$ node -e "Promise.reject(); setTimeout(() => console.log('hello from Node.js'), 1000)"
node:internal/process/promises:288
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "undefined".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v18.12.1

从输出可以看出，'hello from Node.js' 并没有被打印出来，因为 Node.js 进程在检测到未处理的 Promise 拒绝后立即终止了。这对于 Node.js 应用程序（特别是服务器端应用）来说是极其危险的，因为它可能导致服务意外中断，影响系统的可用性和稳定性。

为了对比，如果将 Promise.reject() 替换为 Promise.resolve()：

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

21

查看详情

$ node -e "Promise.resolve(); setTimeout(() => console.log('hello from Node.js'), 1000)"
hello from Node.js

此时，'hello from Node.js' 会正常打印，证明进程未被终止。

因此，如果你正在开发 Node.js 应用程序，并且使用任何受 LTS 支持的版本，那么捕获 Promise 错误是强制性的，否则你的应用将面临意外崩溃的风险。

为什么捕获错误至关重要：用户体验与应用健壮性

即使你的代码只运行在浏览器中，捕获 Promise 错误也并非可有可无。它不仅仅是为了避免控制台警告或进程崩溃，更关乎用户体验和应用程序的整体健壮性。

改善用户体验（UX）

想象一个场景：你的 Promise 负责处理一个用户提交数据的 API 调用。如果这个 API 调用失败了，而你没有捕获错误并进行处理，应用程序可能会表现出以下不佳的用户体验：

• 无限加载状态：应用程序可能一直显示一个加载指示器，让用户误以为操作正在进行中，但实际上已经失败。
• 虚假成功反馈：用户可能认为他们的数据已成功提交，但实际上由于后台错误，数据并未保存。
• 缺乏反馈：用户根本不知道发生了什么，他们的数据没有被处理，也没有收到任何错误提示。

一个负责任的应用程序应该在发生错误时，以适当的方式告知用户，例如显示一个友好的错误消息、提供重试选项或引导用户联系支持。

// 糟糕的用户体验
submitButton.addEventListener('click', () => {
    sendDataToServer(userData) // 假设返回 Promise
        .then(() => {
            // 认为成功，但如果 Promise 拒绝，用户不会知道
            displaySuccessMessage('数据提交成功！');
        });
});

// 更好的用户体验
submitButton.addEventListener('click', () => {
    sendDataToServer(userData)
        .then(() => {
            displaySuccessMessage('数据提交成功！');
        })
        .catch(error => {
            console.error('数据提交失败:', error);
            displayErrorMessage('数据提交失败，请稍后重试。'); // 告知用户
            // 或者记录错误到日志系统
        });
});

提升应用程序健壮性

未处理的错误可能导致应用程序进入不一致的状态，甚至引发后续的连锁反应。通过捕获错误，你可以：

• 进行错误恢复：尝试回滚操作、提供备用方案或引导用户进行纠正。
• 记录错误：将错误信息发送到日志系统或监控平台，以便开发者及时发现和解决问题。
• 保持状态一致性：确保即使在错误发生时，应用程序的数据和 UI 状态也能保持在可预期的范围内。

避免无效的错误处理方式

回到文章开头提到的 catch(e => { throw e }) 模式，这种做法虽然可以消除 Linter 警告，但它实际上并没有真正处理错误。

functionReturningPromise()
    .then((retVal) => doSomething(retVal))
    .catch((error) => {
        throw error; // 再次抛出错误
    });

当你在一个 .catch() 块中再次 throw error 时，你实际上是在创建一个新的、被拒绝的 Promise，这个新的 Promise 同样需要被捕获。如果它最终没有被捕获，那么它仍然会成为一个未处理的 Promise 拒绝，导致与最初不加 catch 块时相同的问题（在 Node.js 中进程崩溃，在浏览器中静默失败）。这种做法只是将错误的处理责任推给了 Promise 链的更下游，而没有真正解决问题。

有效的错误处理策略

有效的 Promise 错误处理应该包含实际的逻辑，而不仅仅是重新抛出错误。以下是一些建议：

1. 用户反馈：在客户端应用中，向用户显示一个清晰的错误消息。

   .catch(error => {
       alert('操作失败：' + error.message); // 简单示例
       console.error('详细错误:', error);
   });

   登录后复制
2. 日志记录：将错误发送到日志服务（如 Sentry、Loggly）或服务器端日志文件。

   .catch(error => {
       logger.error('Promise 链中的错误:', error);
   });

   登录后复制
3. 状态更新：更新应用程序的 UI 状态，例如隐藏加载指示器，显示错误组件。

   .catch(error => {
       this.isLoading = false;
       this.errorMessage = '加载数据失败。';
   });

   登录后复制
4. 错误恢复/默认值：尝试从错误中恢复，或提供一个默认值。

   fetchUserData()
       .catch(error => {
           console.warn('获取用户数据失败，使用默认值。', error);
           return { name: '匿名用户', id: 'guest' }; // 返回一个默认值
       })
       .then(data => {
           displayUser(data);
       });

   登录后复制
5. 重试机制：在某些情况下，可以实现重试逻辑来处理瞬时错误。

总结

捕获 Promise 错误不仅仅是遵循 Linter 规则或避免控制台警告。它是构建健壮、可靠且用户友好的应用程序的关键一环。在 Node.js 环境中，未处理的 Promise 拒绝会导致进程崩溃；在浏览器环境中，则可能导致应用程序静默失败，从而损害用户体验。通过在 .catch() 块中实现有意义的错误处理逻辑，我们能够及时响应问题、告知用户、记录错误并采取适当的恢复措施，从而显著提升应用程序的质量和稳定性。因此，始终捕获 Promise 错误，并对其进行有效处理，是每个 JavaScript 开发者都应遵循的最佳实践。

以上就是深入理解 Promise 错误处理：为何捕获异常至关重要的详细内容，更多请关注php中文网其它相关文章！