Promise.all实现其中有一个接口失败其他结果正常返回,如何实现?

好问题 👍

Promise.all 的特性是:只要有一个 Promise reject,整个 Promise.all 就会 reject,所以你看到的情况就是一个接口失败,整体就抛错了。

如果你的需求是:即使某个接口失败了,也希望其他成功的结果正常返回,有几种常见方案:


方案一:用 Promise.allSettled

ES2020 开始提供 Promise.allSettled,它会等待所有 Promise 都完成(无论成功还是失败),返回结果数组里包含每个 Promise 的状态和值:

javascript 复制代码
const reqs = [
  fetch("/api/1"),
  fetch("/api/2"),
  fetch("/api/3"),
];

Promise.allSettled(reqs).then(results => {
  results.forEach((res, i) => {
    if (res.status === "fulfilled") {
      console.log("接口", i, "成功", res.value);
    } else {
      console.log("接口", i, "失败", res.reason);
    }
  });
});

返回结果类似:

lua 复制代码
[
  { status: "fulfilled", value: ... },
  { status: "rejected", reason: ... },
  { status: "fulfilled", value: ... }
]

方案二:自己封装"永不 reject"的 Promise

如果你想继续用 Promise.all,可以把每个请求都 catch 一下,这样它们不会 reject:

less 复制代码
function wrap(promise) {
  return promise.then(
    res => ({ status: "fulfilled", value: res }),
    err => ({ status: "rejected", reason: err })
  );
}

Promise.all([
  wrap(fetch("/api/1")),
  wrap(fetch("/api/2")),
  wrap(fetch("/api/3")),
]).then(results => {
  console.log(results);
});

效果和 allSettled 一样。


方案三:只需要成功的结果

如果你完全不关心失败的接口,只要成功的值,可以这样:

javascript 复制代码
Promise.all([
  fetch("/api/1").catch(() => null),
  fetch("/api/2").catch(() => null),
  fetch("/api/3").catch(() => null),
]).then(results => {
  const validResults = results.filter(r => r !== null);
  console.log("成功的结果:", validResults);
});

✅ 推荐:如果浏览器或 Node 环境支持,直接用 Promise.allSettled,最直观清晰。

相关推荐
DokiDoki之父2 小时前
web核心—Tomcat的下载/配置/mavenweb项目创建/通过mavenweb插件运行web项目
java·前端·tomcat
我的div丢了肿么办2 小时前
echarts4升级为echarts5的常见问题
前端·javascript·echarts
ZoeLandia3 小时前
Vue 项目 JSON 在线编辑、校验如何选?
前端·vue.js·json
派大星_分星3 小时前
nuxt fetch $fetch useFetch 等使用方式区别
前端
快手技术3 小时前
兼顾效率和性能!快手低代码平台在大型活动中的技术实践!
前端
WebInfra4 小时前
📱开源 AI 工具驱动 iOS 自动化 、接入全新 Qwen 模型 - Midscene v0.29 发布
前端·ios·测试
乖女子@@@4 小时前
React-props的children属性
前端·javascript·react.js
OEC小胖胖4 小时前
组件化思维(下):表单与交互组件,倾听用户的心声
前端·微信小程序·小程序·微信开放平台
八月十八4 小时前
React常用Hooks及使用示例大全
前端·javascript·react.js