产品经理的紧急需求，暴露了未处理的Promise拒绝

未处理的Promise拒绝是前端开发中常见的隐患，可能导致应用崩溃、数据不一致和用户体验受损。

1. 未捕获的Promise拒绝

   当Promise被拒绝（如网络错误、接口500错误）且未通过.catch()或try-catch处理时，错误会沿调用链传递，最终触发全局unhandledrejection事件。

   示例代码中的axios.post和fetchUserData均未处理错误，导致支付失败时用户无反馈，订单状态不同步。

2. 测试覆盖不足

   Mock服务器返回理想化数据（如永远200状态码），未模拟真实错误场景。

   认知误区：认为“控制台无报错”即代码正确，忽略异步错误的隐蔽性。

• 手动添加.catch()：为每个Promise链显式处理错误。axios.post('/api/payment', { amount: 100 }) .then(res => checkOrderStatus()) .catch(err => { console.error('支付失败:', err); alert('支付异常，请联系客服'); });

• async/await + 统一错误处理：通过try-catch集中处理错误，并回滚状态。const handlePayment = async () => { try { const res = await axios.post('/api/payment', { amount: 100 }); await checkOrderStatus(res.data); } catch (err) { reportError(err); // 上报监控系统 showErrorModal('支付失败，请检查网络或账户余额'); rollbackLocalOrder(); // 回滚本地订单状态 }};

• Axios拦截器：统一拦截响应错误，避免重复代码。axios.interceptors.response.use( response => response, error => { if (!error.config.bypassGlobalCatch) { store.dispatch('addErrorLog', error); // 记录错误日志 } return Promise.reject(error); // 允许后续处理 });
• 全局错误监听：捕获未处理的Promise拒绝。window.addEventListener('unhandledrejection', e => { Sentry.captureException(e.reason); // 上报Sentry});

1. Code Review重点

   检查所有异步操作是否包含错误处理（.catch()/try-catch）。

   禁止在组件中直接使用await而不包裹错误处理。

2. 监控与埋点

   配置前端异常监控（如Sentry、自定义日志系统）。

   在React/Vue中使用错误边界（ErrorBoundary）捕获组件级错误。

3. 新人培训红线

   异步操作必须包含错误处理和状态回滚逻辑。

   生产环境屏蔽console.error，避免敏感信息泄露。

1. ESLint规则

   使用eslint-plugin-promise强制要求Promise链必须包含.catch()。

   配置no-floating-promises规则禁止未处理的Promise。

2. TypeScript类型约束

   定义返回Promise的函数时，明确标注可能的错误类型，提醒调用方处理。

3. 代码模板生成

   在IDE中配置代码片段（Snippet），自动生成带错误处理的Promise/async模板。

未处理的Promise拒绝如同“定时炸弹”，需通过代码规范、全局拦截和监控体系多层次防御。团队应建立“防御性编码”文化，从工具链到流程全面规避低级错误，确保系统健壮性。

评论区分享你的防呆设计！ 例如：是否使用自定义Hook封装异步逻辑？如何通过单元测试覆盖错误场景？