深入理解 Promise 错误处理：为什么你总应该捕获它们？

在现代 JavaScript 异步编程中，Promise 已经成为处理异步操作的核心机制。然而，关于 Promise 错误处理的最佳实践，尤其是何时以及为何需要捕获它们，常常引起混淆。许多开发者，在使用如 @typescript-eslint/no-floating-promises 这样的 linter 规则时，可能会疑惑为什么即使不显式添加 catch 块，错误似乎也能被抛出，或者为什么一个简单的 catch(error => { throw error; }) 无法真正解决问题。本文将深入探讨 Promise 错误处理的必要性，并提供跨环境的最佳实践。

1. Node.js 环境下的严重性：未处理的拒绝是硬错误

在 Node.js 环境中，未处理的 Promise 拒绝不再仅仅是控制台警告，而是可能导致应用程序崩溃的“硬错误”。从 Node.js v15 版本开始，如果一个 Promise 被拒绝且其错误没有被任何 .catch() 块处理，Node.js 进程将直接退出。这与浏览器环境中仅在控制台打印错误并继续执行的行为截然不同。

考虑以下代码示例：

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

在 Node.js v15 及更高版本中运行这段代码，你会发现 'hello' 永远不会被打印出来。进程会在 Promise 拒绝后立即终止，并输出类似以下内容的错误信息：

$ node -e "Promise.reject('Something went wrong'); 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 "Something went wrong".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v18.12.1

这表明，在 Node.js 应用程序中，忽视 Promise 错误处理将带来巨大的风险，可能导致服务意外中断，严重影响应用的可用性和稳定性。为了避免这种情况，必须始终为可能失败的 Promise 添加适当的错误处理逻辑。

作为对比，如果将 Promise.reject() 替换为 Promise.resolve()，程序将按预期执行：

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

这明确了在 Node.js 中捕获 Promise 错误的重要性。

2. 浏览器环境下的重要性：优化用户体验

尽管浏览器不会因为未处理的 Promise 拒绝而终止整个页面，但忽视错误处理同样会导致糟糕的用户体验（UX）。用户通常不会查看控制台输出，因此即使错误被记录下来，他们也无法得知发生了什么。

想象一个场景：你的应用程序发起了一个 API 调用，该调用返回一个 Promise，用于提交用户输入的数据。如果这个 API 调用失败，但你没有捕获错误，那么用户可能会遇到以下问题：

• 无限加载状态： 应用程序可能显示一个无限旋转的加载指示器，让用户误以为操作仍在进行中。
• 虚假成功： 用户可能认为他们的数据已成功提交，而实际上操作失败了，导致数据丢失或状态不一致。
• 缺乏反馈： 用户无法得知操作失败的原因，也无法采取任何补救措施。

这些情况都会严重损害用户对应用程序的信任和满意度。通过捕获 Promise 错误，你可以：

钉钉 AI 助理

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

21

查看详情

• 向用户提供有意义的反馈： 例如，显示一个错误消息，解释发生了什么，并建议用户重试。
• 恢复应用程序状态： 在错误发生后，将应用程序恢复到一致的可用状态。
• 记录错误： 将错误发送到日志服务，以便开发团队可以追踪和修复问题。

3. 捕获 Promise 错误的真正目的与最佳实践

许多开发者为了满足 linter 规则而添加 catch(e => { throw e; }) 这样的代码块。然而，这种做法并没有真正处理错误。它只是捕获了一个 Promise 拒绝，然后立即抛出一个新的拒绝，最终仍然会导致一个未处理的 Promise 拒绝（尤其是在 Node.js 中），或者在浏览器控制台留下一个错误日志。

真正的 Promise 错误处理意味着将错误集成到应用程序的逻辑和用户界面中。

以下是一些有效的错误处理实践：

• 通知用户： 当关键操作失败时，通过弹窗、消息条或更新 UI 元素等方式告知用户。

  function submitUserData(data) {
      return fetch('/api/submit', { method: 'POST', body: JSON.stringify(data) })
          .then(response => {
              if (!response.ok) {
                  throw new Error('Network response was not ok.');
              }
              return response.json();
          })
          .then(result => {
              console.log('Data submitted successfully:', result);
              // 更新 UI，显示成功消息
          })
          .catch(error => {
              console.error('Submission failed:', error);
              alert('数据提交失败，请重试！'); // 向用户显示错误
              // 更新 UI，显示错误消息或回滚状态
          });
  }

  登录后复制

• 记录错误： 将错误发送到集中式日志服务（如 Sentry, LogRocket），以便进行监控和分析。

  function fetchData() {
      return fetch('/api/data')
          .then(response => response.json())
          .catch(error => {
              console.error('Failed to fetch data:', error);
              // sendErrorToMonitoringService(error); // 将错误发送到监控服务
              throw error; // 错误可能需要继续传播，以便上层逻辑处理
          });
  }

  登录后复制

• 优雅降级或提供备用方案： 在某些情况下，即使某个异步操作失败，应用程序也可以通过提供替代内容或功能来优雅降级。

• 重试机制： 对于瞬时错误（如网络波动），可以实现重试逻辑。

注意事项：

• 避免裸奔的 Promise： 确保每一个可能被拒绝的 Promise 链的末尾都有一个 .catch() 块。
• 理解 async/await 中的错误处理： 使用 async/await 时，Promise 错误可以通过 try...catch 语句进行处理，这与同步代码的错误处理方式类似。

  async function performAsyncOperation() {
      try {
          const result = await someFunctionReturningPromise();
          doSomethingWithResult(result);
      } catch (error) {
          console.error('Async operation failed:', error);
          // 处理错误，例如更新 UI
      }
  }

  登录后复制
• 全局错误处理（谨慎使用）： 在 Node.js 中，可以使用 process.on('unhandledRejection', ...) 来捕获未处理的 Promise 拒绝，但这通常只应用于记录错误，而不是替代局部错误处理。在浏览器中，可以使用 window.addEventListener('unhandledrejection', ...)。这些全局处理机制是最后的防线，不应作为常规错误处理的替代品。

总结

捕获 Promise 错误不仅仅是为了满足 linter 的要求，更是构建健壮、稳定和用户友好的应用程序的基石。在 Node.js 环境中，未处理的 Promise 拒绝可能导致应用程序崩溃；在浏览器环境中，它们会导致糟糕的用户体验。通过理解不同环境下的行为差异，并采用有效的错误处理策略（如通知用户、记录错误、优雅降级），我们可以确保应用程序在面对异步操作失败时，依然能够提供可靠和可预测的行为。记住，catch(e => { throw e; }) 并非真正的错误处理，我们应该致力于将错误信息转化为有价值的反馈和可恢复的应用程序状态。

以上就是深入理解 Promise 错误处理：为什么你总应该捕获它们？的详细内容，更多请关注php中文网其它相关文章！