错误隔离的核心是单请求失败不阻塞其他请求，Vue中应避免Promise.all而用Promise.allSettled，或手动包装为始终resolve的Promise，配合拦截器兜底与业务层降级实现柔性容错。
多个异步请求并发时，错误隔离的核心目标是：**不让一个请求失败拖垮其他请求的正常响应，同时仍能准确识别和处理各自错误**。Vue 中用 Axios 做并发请求，默认的 Promise.all 或 axios.all 是“全有或全无”策略——任一失败就整体 reject，这不满足错误隔离需求。真正可行的做法是让每个请求独立完成、独立报错，再统一收集结果。
用 Promise.allSettled 替代 Promise.all
这是最直接、标准的错误隔离方案。它不会因某个请求失败而中断其余请求，而是等所有请求都结束（无论成功或失败），返回每个请求的完整状态对象。
-
每个结果带 status 字段：值为
"fulfilled"或"rejected"，可据此分别取数据或错误 - 不抛出异常中断流程：即使某接口 503 或超时，其他请求结果依然可用
- 适合展示型页面：比如首页要同时拉用户信息、通知列表、未读消息数，其中通知接口挂了，不影响头像和消息数渲染
手动包装每个请求为 always-resolved Promise
当项目环境不支持 Promise.allSettled（如需兼容旧版浏览器），可自行封装：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 对每个 axios 请求用
.then().catch()包一层，确保它总是 resolve，并把原始响应或错误作为 payload 返回 - 示例：
const req1 = axios.get('/user').then(res => ({ ok: true, data: res.data })).catch(err => ({ ok: false, error: err })) - 再用
Promise.all([req1, req2, req3])汇总，后续按ok字段分流处理
在 Axios 拦截器里做请求级错误兜底
错误隔离不只是并发层面的事，更要从请求源头降低失败概率和影响范围：
立即学习“前端免费学习笔记（深入）”；
- 响应拦截器中拦截 4xx/5xx 时不直接 throw，而是返回 { code: xxx, message: 'xxx' } 格式对象，让业务层自己判断是否需要提示用户
- 对特定错误码（如 token 过期）单独处理，跳转登录页；对网络错误、超时等通用问题，记录日志但不阻断其他请求
- 避免在拦截器里全局 alert 或 router.push，防止一个接口异常导致整个页面跳转或弹窗轰炸
业务层按需聚合与降级
前端拿到并发结果后，要主动做“柔性处理”：
- 关键数据缺失时启用本地缓存或默认值（例如用户头像加载失败，显示默认图标）
- 非关键请求失败可静默忽略，只在控制台 warn，不干扰 UI 渲染
- 提供重试入口：把失败的请求单独拎出来，点击按钮重新发起，不影响已成功部分
