Vue 3 中应分层处理网络异常：全局捕获需结合 unhandledrejection 监听与 errorHandler，识别 NetworkError 后调用 ElMessage 或 $modal.msgError 弹窗提示，并在 API 响应拦截器中集中触发，异步组件错误需单独通过 errorComponent 或 onError 处理。
在 Vue 3 中统一处理网络异常并用弹窗展示，关键不是“把所有错误都塞进弹窗”，而是分层响应：全局捕获 + 语义识别 + 业务级弹窗触发。Element Plus 的 ElMessage 或封装后的 $modal.msgError 是最常用、最轻量的呈现方式，适合网络请求失败这类非阻断型错误。
1. 全局捕获网络错误并识别为业务异常
仅靠 app.config.errorHandler 捕不到 Promise reject（如 axios 请求失败未 catch）。必须配合 window.addEventListener('unhandledrejection')，并在其中统一归一化为 NetworkError 或自定义业务错误类：
- 在
main.ts初始化阶段注册监听器 - 判断
reason是否含 HTTP 状态码、response、code: 'ERR_NETWORK'等特征 - 构造标准错误实例，例如：
new NetworkError('请求超时', { url, method })
2. 在 errorHandler 中触发 Element Plus 弹窗
app.config.errorHandler 是唯一能稳定拿到组件上下文的地方，适合做“有感知”的提示。但注意：不能直接调用 ElMessage（它依赖当前组件实例和 app 上下文），需确保已挂载且具备访问能力：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 推荐在
app.mount('#app')之后再设置errorHandler，或使用getCurrentInstance()安全调用 - 只对
err instanceof NetworkError或err.type === 'NETWORK'的情况调用ElMessage.error() - 避免重复提示：加防抖或按 URL/错误码去重，防止连续请求失败刷屏
3. 封装统一的网络错误弹窗函数
比在 errorHandler 里硬写更灵活的方式，是提供一个可复用的提示函数，在 API 层集中调用：
- 创建
src/utils/notify.ts，导出showNetworkError(err) - 内部自动提取 message（优先用
err.response?.data?.message）、控制 duration（如 4000ms）和 showClose - 在
api/request.ts的响应拦截器中统一调用：if (error.response?.status >= 500) showNetworkError(error) - 若项目已集成 RuoYi-Vue3 的
$modal插件，直接用this.$modal.msgError(...)更简洁
4. 补充：异步组件加载失败也走同一套提示逻辑
路由级异步组件（defineAsyncComponent）加载失败属于资源错误，不会进 errorHandler，需单独处理：
- 配置
errorComponent显示占位页，同时在其中调用showNetworkError - 或利用
onError回调，在重试失败后主动触发弹窗提示 - 错误信息建议包含“请刷新页面”或“检查网络”等明确引导，而非仅报 technical detail
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
