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,最直观清晰。

相关推荐
寅时码1 小时前
React 之死·终章:一个 useRef,把闭包陷阱、依赖数组、漫天 rerender 全送走
前端·react.js·ai编程
不好听6131 小时前
HTML 事件监听机制:从 DOM Level 0 到 React 合成事件
前端·react.js·html
wordbaby1 小时前
为什么刷新页面就 404?聊聊 SPA 路由与 Nginx 的那点事
前端
不好听6132 小时前
React 核心概念:JSX、组件与数据驱动
前端·react.js
触底反弹2 小时前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听6132 小时前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
GuWenyue2 小时前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
前端·数据库·人工智能
GuWenyue2 小时前
传统Agent工具两大痛点!300行代码落地MCP跨语言工具,彻底解耦LLM与工具
前端·人工智能·算法
小林ixn3 小时前
从 onclick 到 React 合成事件,再到完整应用逻辑:一次前端架构的深度剖析
前端·react.js·前端框架
Csvn3 小时前
🧩「找不到模块」排查全记录——Monorepo 下 TypeScript 路径别名的 5 种「不通」与根治方案
前端