为什么捕获 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应用相结合，分别对PHP和MySQL做了深入浅出的分析，不仅介绍PHP和MySQL的一般概念，而且对PHP和MySQL的Web应用做了较全面的阐述，并包括几个经典且实用的例子。 本书是第4版，经过了全面的更新、重写和扩展，包括PHP5.3最新改进的特性（例如，更好的错误和异常处理），MySQL的存储过程和存储引擎，Ajax技术与Web2.0以及Web应用需要注意的安全
设想以下场景：您的应用程序发起了一个 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 错误处理应该将错误信息整合到应用程序的逻辑或用户界面中，从而实现：
-
用户反馈： 将错误信息以用户友好的方式展示出来，例如通过弹窗、消息通知或页面上的错误提示。
functionReturningPromise() .then(retVal => doSomething(retVal)) .catch(error => { alert(`操作失败: ${error.message}`); // 向用户显示错误 console.error("API 调用失败:", error); // 记录到控制台 // 可以在此处重新抛出，以便上层 Promise 链进一步处理， // 但前提是上层有明确的处理逻辑。 // throw error; }); -
日志记录： 将错误详情记录到应用程序的日志系统或监控服务中，以便开发团队能够及时发现和解决问题。
import { logErrorToMonitoringSystem } from './utils/monitoring'; functionReturningPromise() .then(retVal => doSomething(retVal)) .catch(error => { logErrorToMonitoringSystem(error); // 记录到监控系统 // ... 用户反馈或其他业务逻辑 }); -
状态更新： 根据错误情况更新应用程序的 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); } }; 业务逻辑处理： 根据错误的类型和严重性，执行特定的业务逻辑，例如回滚操作、重试机制、通知管理员等。
总结与建议
捕获 Promise 错误不仅仅是为了满足 Linter 的要求，更是确保应用程序健壮性、稳定性和良好用户体验的基石。
- 理解环境差异： 务必清楚 Node.js 和浏览器在处理未捕获 Promise 拒绝时的行为差异。在 Node.js 中，这可能导致进程崩溃；在浏览器中，这会损害用户体验。
- 避免无效处理： 避免使用 catch(e => { throw e }) 这种仅仅重新抛出的模式。它并不能真正解决问题，只是掩盖了未处理拒绝的本质。
- 实施有效策略： 针对不同场景，采取恰当的错误处理策略，包括向用户反馈、记录错误、更新 UI 状态或执行特定的业务逻辑。
- 养成良好习惯： 始终为您的 Promise 链添加 catch 块，即使在某些情况下您认为不需要自定义处理，也至少应该记录错误，以避免潜在的运行时问题。
通过深入理解 Promise 错误处理的机制和重要性，并采用最佳实践，您将能够构建出更稳定、更可靠、用户体验更佳的应用程序。
