统一拦截和提示异步错误的核心是：封装 request 函数自动 catch 错误并分类提示；用 unhandledrejection 监听未捕获 Promise 拒绝；结合 React/Vue 错误边界兜底；提示层需轻量、防重复、友好可关闭。
在 JavaScript 项目中，统一拦截和提示异步错误的核心思路是：**用 Promise 链的 .catch() 统一收口 + 封装请求函数自动附加错误处理 + 全局错误边界（如 React）或全局监听兜底**。不依赖 try/catch 每处写，也不靠 window.onerror 捕不到 Promise 拒绝。
封装请求函数，内置错误拦截与标准化提示
所有 API 调用都走一个统一的 request 函数，内部自动 catch 错误、分类处理、触发提示，并返回标准化结果（避免业务层再手动 try/catch）：
- 对网络失败、超时、4xx/5xx 响应，统一调用
showError(message)提示用户（如用 Toast 或 Modal） - 对特定业务错误码（如 1001-登录过期、1002-权限不足），跳转登录页或弹权限提示，不单纯显示“请求失败”
- 提供可选参数
silent: true，让某些场景（如轮询、静默刷新）不弹提示，只返回错误对象供业务判断
示例（基于 fetch）：
async function request(url, options = {}) {
const { silent = false, ...fetchOptions } = options;
try {
const res = await fetch(url, {
headers: { 'Content-Type': 'application/json', ...fetchOptions.headers },
...fetchOptions
});
if (!res.ok) {
const err = new Error(`HTTP ${res.status}: ${res.statusText}`);
err.status = res.status;
throw err;
}
return await res.json();
} catch (err) {
if (!silent) {
if (err.status === 401) {
location.href = '/login';
} else if (err.status === 403) {
showError('权限不足，请联系管理员');
} else {
showError(err.message || '网络异常，请稍后重试');
}
}
throw err; // 仍抛出，方便业务层进一步处理（如重试逻辑）
}
}
统一 Promise 错误捕获入口（非请求类异步操作）
定时器、事件回调、第三方 SDK 的 Promise 等，容易遗漏 .catch。可在项目启动时设置全局未捕获 Promise 拒绝监听：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 用
window.addEventListener('unhandledrejection', e => {...})捕获未被 catch 的 Promise rejection - 在监听器中过滤掉已知可忽略的错误（如图片加载失败、分析脚本超时），其余调用统一提示函数
- 注意：该监听仅在浏览器环境有效；Node.js 中用
process.on('unhandledRejection')
示例：
window.addEventListener('unhandledrejection', (e) => {
const { reason } = e;
// 忽略常见无害拒绝（如 abort controller 抛的 AbortError）
if (reason?.name === 'AbortError') return;
// 其他一律提示
showError('操作异常，请刷新页面重试');
});
组件级错误边界（React/Vue 场景）
前端框架中，异步错误可能发生在 useEffect、setup() 或事件处理器里，无法被 JSX 渲染层捕获。需结合错误边界组件兜底：
- React：用
componentDidCatch或useErrorBoundaryHook 捕获子组件内抛出的同步/异步错误（注意：必须是组件内部 Promise reject，且未被局部 catch） - Vue 3：配合
onErrorCaptured+errorHandler全局配置，拦截 setup 内 Promise 错误并转发给统一提示模块 - 关键点：错误边界本身不处理业务逻辑，只负责“捕获 → 记录 → 触发统一提示 → 显示 fallback UI”
提示层设计要点：轻量、可关闭、不阻断流程
统一提示函数（如 showError）不是简单 alert，应满足体验要求：
- 使用非模态 Toast，3 秒自动消失；支持手动关闭按钮
- 错误消息尽量具体但友好：“用户名已被占用”优于“提交失败”
- 开发环境额外打印完整 error.stack 到 console，便于调试
- 避免重复提示：同一错误码短时间内（如 30 秒）不连续弹窗，可用 Map 缓存最近错误时间戳
