深入理解 JavaScript Promise 错误处理的必要性与最佳实践

为什么捕获 Promise 错误至关重要？

在 JavaScript 异步编程中，Promise 已经成为处理异步操作的标准方式。然而，许多开发者在使用 Promise 时，对于其错误处理机制的理解可能存在误区，特别是在面对像 @typescript-eslint/no-floating-promises 这样的 Linter 规则时，会疑惑为何即使没有自定义的错误处理逻辑，也必须添加 catch 块。

例如，以下代码在启用 Linter 规则时会触发警告：

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

Linter 要求我们添加一个 catch 块。但如果我们的意图只是让错误像同步代码一样被抛出，那么显式添加一个 catch 块，然后再次抛出错误，似乎显得多余：

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

表面上看，无论是否添加上述 catch 块，错误最终都会在控制台输出。然而，这种直观的观察忽略了 Promise 错误处理在不同环境下的深层行为差异，以及对应用程序稳定性和用户体验的潜在影响。

立即学习“Java免费学习笔记（深入）”；

Node.js 与浏览器环境下的行为差异

Promise 未处理的拒绝（unhandled rejection）在不同的 JavaScript 运行时环境中具有截然不同的行为，这是理解其重要性的关键。

Node.js 环境：致命错误与进程终止

自 Node.js v15 版本起，未捕获的 Promise 拒绝被视为一个“硬错误”（HARD ERROR）。这意味着当 Node.js 进程检测到未处理的 Promise 拒绝时，它将立即终止。这与浏览器中仅打印警告的行为形成了鲜明对比。

考虑以下代码示例：

Promise.reject();
setTimeout(() => console.log('hello'), 1000);

这段代码看似无害：一个未处理的 Promise 拒绝，以及一个在 1 秒后打印 'hello' 的定时器。

在 Node.js 环境中运行此代码，您会观察到以下结果：

$ node -e "Promise.reject(); setTimeout(() => console.log('hello'), 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' 永远不会被打印出来，因为 Node.js 进程在 1 秒钟计时器完成之前就因未处理的 Promise 拒绝而终止了。这对于服务器端应用程序来说是灾难性的，可能导致服务意外中断。

为了验证这一点，您可以将 Promise.reject() 更改为 Promise.resolve()：

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

此时，'hello' 被成功打印。因此，如果您正在开发 Node.js 应用程序，并且使用了任何 LTS（长期支持）版本，您必须处理 Promise 错误，否则将面临应用程序意外崩溃的风险。

浏览器环境：用户体验的关键

在浏览器环境中，未捕获的 Promise 拒绝通常只会导致控制台打印一条错误信息，而不会中断应用程序的执行。这使得一些开发者可能会认为，既然不影响功能，那么忽略这些错误也无妨。然而，这种观点忽视了用户体验的重要性。

自学 PHP、MySQL和Apache

本书将PHP开发与MySQL应用相结合，分别对PHP和MySQL做了深入浅出的分析，不仅介绍PHP和MySQL的一般概念，而且对PHP和MySQL的Web应用做了较全面的阐述，并包括几个经典且实用的例子。 本书是第4版，经过了全面的更新、重写和扩展，包括PHP5.3最新改进的特性（例如，更好的错误和异常处理），MySQL的存储过程和存储引擎，Ajax技术与Web2.0以及Web应用需要注意的安全

400

查看详情

设想以下场景：您的应用程序发起了一个 API 调用，该调用由 Promise 跟踪，用于提交用户输入的数据。如果 API 调用因某种原因失败，但您没有捕获并处理这个错误，那么应用程序可能会：

• 显示一个无限加载的指示器，让用户感到困惑。
• 让用户误以为数据已成功提交，而实际上却失败了。
• 导致 UI 状态不一致，例如表单数据未清空，或页面跳转失败。

无论是哪种情况，都会导致糟糕的用户体验。用户期望在操作失败时得到明确的反馈，例如一个错误提示、重试选项或引导他们联系支持。因此，即使在浏览器中，捕获 Promise 错误并将其反馈给用户或采取其他补救措施，也是构建健壮且用户友好的应用程序的必要条件。

避免无效的错误处理方式

如前所述，仅仅为了 Linter 而添加一个 catch 块，然后立即重新抛出错误，如 catch(e => { throw e })，并不是真正的错误处理。

// 这种方式并不能有效处理错误
functionReturningPromise()
    .then((retVal) => doSomething(retVal))
    .catch((error) => {
        // 仅仅是重新抛出，创建了一个新的未处理拒绝
        throw error;
    });

这种做法虽然可以暂时“平息” Linter 的警告，但它并没有解决问题的核心：原始的 Promise 拒绝仍然没有被有效处理。它只是创建了一个新的、被拒绝的 Promise，这个新的拒绝最终还是会变成一个未处理的拒绝，并被记录到控制台（在浏览器中）或导致进程终止（在 Node.js 中）。

有效的错误处理意味着您需要根据应用程序的上下文和业务逻辑，对错误采取具体的行动，而不是简单地将其抛回。

有效的 Promise 错误处理策略

真正的 Promise 错误处理应该将错误信息整合到应用程序的逻辑或用户界面中，从而实现：

1. 用户反馈： 将错误信息以用户友好的方式展示出来，例如通过弹窗、消息通知或页面上的错误提示。

   functionReturningPromise()
       .then(retVal => doSomething(retVal))
       .catch(error => {
           alert(`操作失败: ${error.message}`); // 向用户显示错误
           console.error("API 调用失败:", error); // 记录到控制台
           // 可以在此处重新抛出，以便上层 Promise 链进一步处理，
           // 但前提是上层有明确的处理逻辑。
           // throw error;
       });

   登录后复制

2. 日志记录： 将错误详情记录到应用程序的日志系统或监控服务中，以便开发团队能够及时发现和解决问题。

   import { logErrorToMonitoringSystem } from './utils/monitoring';
   
   functionReturningPromise()
       .then(retVal => doSomething(retVal))
       .catch(error => {
           logErrorToMonitoringSystem(error); // 记录到监控系统
           // ... 用户反馈或其他业务逻辑
       });

   登录后复制

3. 状态更新： 根据错误情况更新应用程序的 UI 状态，例如关闭加载指示器、禁用相关按钮、显示默认值等。

   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
   
   const handleSubmit = async () => {
       setIsLoading(true);
       setError(null);
       try {
           await functionReturningPromise();
           // ... 成功逻辑
       } catch (err) {
           setError(err.message); // 更新错误状态，UI 将显示错误信息
       } finally {
           setIsLoading(false);
       }
   };

   登录后复制

4. 业务逻辑处理： 根据错误的类型和严重性，执行特定的业务逻辑，例如回滚操作、重试机制、通知管理员等。

总结与建议

捕获 Promise 错误不仅仅是为了满足 Linter 的要求，更是确保应用程序健壮性、稳定性和良好用户体验的基石。

• 理解环境差异： 务必清楚 Node.js 和浏览器在处理未捕获 Promise 拒绝时的行为差异。在 Node.js 中，这可能导致进程崩溃；在浏览器中，这会损害用户体验。
• 避免无效处理： 避免使用 catch(e => { throw e }) 这种仅仅重新抛出的模式。它并不能真正解决问题，只是掩盖了未处理拒绝的本质。
• 实施有效策略： 针对不同场景，采取恰当的错误处理策略，包括向用户反馈、记录错误、更新 UI 状态或执行特定的业务逻辑。
• 养成良好习惯： 始终为您的 Promise 链添加 catch 块，即使在某些情况下您认为不需要自定义处理，也至少应该记录错误，以避免潜在的运行时问题。

通过深入理解 Promise 错误处理的机制和重要性，并采用最佳实践，您将能够构建出更稳定、更可靠、用户体验更佳的应用程序。

以上就是深入理解 JavaScript Promise 错误处理的必要性与最佳实践的详细内容，更多请关注php中文网其它相关文章！