Vue Axios 网络请求如何处理多个异步请求并发时的错误隔离

错误隔离的核心是单请求失败不阻塞其他请求，Vue中应避免Promise.all而用Promise.allSettled，或手动包装为始终resolve的Promise，配合拦截器兜底与业务层降级实现柔性容错。

多个异步请求并发时，错误隔离的核心目标是：不让一个请求失败拖垮其他请求的正常响应，同时仍能准确识别和处理各自错误。Vue 中用 Axios 做并发请求，默认的 Promise.all 或 axios.all 是“全有或全无”策略——任一失败就整体 reject，这不满足错误隔离需求。真正可行的做法是让每个请求独立完成、独立报错，再统一收集结果。

用 Promise.allSettled 替代 Promise.all

这是最直接、标准的错误隔离方案。它不会因某个请求失败而中断其余请求，而是等所有请求都结束（无论成功或失败），返回每个请求的完整状态对象。

1. 每个结果带 status 字段：值为 "fulfilled" 或 "rejected"，可据此分别取数据或错误
2. 不抛出异常中断流程：即使某接口 503 或超时，其他请求结果依然可用
3. 适合展示型页面：比如首页要同时拉用户信息、通知列表、未读消息数，其中通知接口挂了，不影响头像和消息数渲染

手动包装每个请求为 always-resolved Promise

当项目环境不支持 Promise.allSettled（如需兼容旧版浏览器），可自行封装：

1. 对每个 axios 请求用 .then().catch() 包一层，确保它总是 resolve，并把原始响应或错误作为 payload 返回
2. 示例：const req1 = axios.get('/user').then(res => ({ ok: true, data: res.data })).catch(err => ({ ok: false, error: err }))
3. 再用 Promise.all([req1, req2, req3]) 汇总，后续按 ok 字段分流处理

在 Axios 拦截器里做请求级错误兜底

错误隔离不只是并发层面的事，更要从请求源头降低失败概率和影响范围：

1. 响应拦截器中拦截 4xx/5xx 时不直接 throw，而是返回 { code: xxx, message: 'xxx' } 格式对象，让业务层自己判断是否需要提示用户
2. 对特定错误码（如 token 过期）单独处理，跳转登录页；对网络错误、超时等通用问题，记录日志但不阻断其他请求
3. 避免在拦截器里全局 alert 或 router.push，防止一个接口异常导致整个页面跳转或弹窗轰炸

业务层按需聚合与降级

前端拿到并发结果后，要主动做“柔性处理”：

1. 关键数据缺失时启用本地缓存或默认值（例如用户头像加载失败，显示默认图标）
2. 非关键请求失败可静默忽略，只在控制台 warn，不干扰 UI 渲染
3. 提供重试入口：把失败的请求单独拎出来，点击按钮重新发起，不影响已成功部分