一次性帮你搞定 Promise 的四个静态方法

长篇大论的原文和引用我就不贴了,直接上干货。

1. Promise.all():一荣俱荣,一损俱损

  • 一句话概括:一荣俱荣,一损俱损 (all one rope mazha) 。
  • 核心条件 :它等待传入数组中的所有 Promise 都成功兑现 (fulfilled) 后才完成。只要其中有一个 Promise 失败 (rejected) ,Promise.all() 就会立即失败,并返回第一个失败的原因,忽略其余的结果。
  • 返回值 :按传入的Promise 数组顺序返回结果。
  • 适用场景 :当所有任务都是关键的,并且任何一个失败都会导致整个操作失去意义时。例如,加载页面正常运行所必需的多个关键资源,相互依赖的两个资源,同步请求多个接口等。

2. Promise.allSettled():活要见人,死要见尸

  • 一句话概括:活要见人,死要见尸 (deadline) 。
  • 核心条件 :它等待传入数组中的所有 Promise 都达到"敲定" (settled,无论成功或失败) 状态后才完成。它永远不会失败,总是返回一个数组,其中包含了每个 Promise 的最终结果 (状态、值或原因) 。
  • 返回值 :按传入的Promise 数组顺序返回结果。但是注意,有失败结果也会包含在其中
  • 适用场景:在处理批量任务时,即使部分任务失败,仍需要知道所有任务的最终结果,以便进行后续处理。例如,一个批量发送邮件的接口,即使部分邮件发送失败,也要记录所有邮件的最终发送结果。
javascript 复制代码
Promise.allSettled([Promise.resolve("活着的敌酋"), Promise.reject("死了的敌酋")]).then((res) => {
  console.log("活要见人,死要见尸", res);
});

3. Promise.race():一马当先,先登之士

  • 一句话概括:一马当先,先登之士 (ao ao fast) 。
  • 核心条件 :它等待传入数组中的第一个 Promise 达到 settled 状态时,就立即完成,无论成功还是失败 (就问你快不快吧) 。它会忽略数组中的其他所有 Promise。
  • 适用场景 :当需要实现超时控制 或在多个数据源中竞争 获取最快结果时。例如,给一个网络请求设置超时限制,setTimeout 设置一个超时时间,如果超时了,就返回一个错误,和请求接口一同传入Promise.race([request, timeout])中,或者 planB 和 planA 一同传入Promise.race([planA, planB])中。
javascript 复制代码
const promise1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve("新款电动三轮车");
  }, 1000);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, "老款A8");
});

Promise.race([promise1, promise2])
  .then((values) => {
    console.log("老A8不是A8?", values);
  })
  .catch((error) => {
    console.log("就问你是不是", error);
  });

4. Promise.any():谁来都行,好交朋友

  • 一句话概括:谁来都行,好交朋友 (all just gemen) 。
  • 核心条件 :它等待传入数组中的第一个 Promise 成功 (fulfilled) 时,就立即完成。只有当数组中的所有 Promise 都失败 (rejected) 时,它才会以一个 AggregateError 失败。
  • 适用场景 :当有多个冗余的数据源,而只需要其中任意一个成功的结果时。例如,从多个备份服务器获取数据,只要其中一个成功了,就返回结果,谁来都行,就跟郭老师说王寡妇好交朋友一个道理。
javascript 复制代码
const promises = [Promise.reject(new Error("张裁缝")), Promise.reject(new Error("李铁匠")), Promise.resolve("赵屠户")];

Promise.any(promises)
  .then((value) => {
    console.log("成功和王寡妇交朋友的时:", value); // '赵屠户'
  })
  .catch((error) => {
    // 只有当所有 Promise 都失败时才会执行
    console.log(error instanceof AggregateError); // true
    console.log(error.errors); // [Error('失败1'), Error('失败2')]
  });

总结

这四个 Promise 静态方法的核心都是监听器 (他们并不发送所谓的并行请求,只是监听请求的状态),它们都用于观察一组已经开始执行 的异步任务的状态。它们之间唯一的区别,就在于它们监听并完成的条件不同。

  • Promise.all():一荣俱荣,一损俱损
  • Promise.allSettled():活要见人,死要见尸
  • Promise.race():一马当先,先登之士
  • Promise.any():谁来都行,好交朋友

参考资料 MDN Promise

bu:lichonglou

相关推荐
Nymph_Zhu35 分钟前
pdf转换markdown预览及内容互相点击定位
前端·pdf·vue3·markdown·element-plus
计算机魔术师40 分钟前
Google 一天蒸发5000亿,Reddit 靠 AI 训练喂得饱自己却饿死
前端
小大宇1 小时前
Vue知识点-ElementPlus-05 输入框
前端·javascript·vue.js
l1m0_1 小时前
AI设计工具有哪些?Paico、Pixso AI、墨刀AI、Lovable、Codex怎么选
前端·人工智能·ai·设计·墨刀·codex·pixso
web打印社区1 小时前
Lodop在Edge和双核浏览器-先分清内核
前端·javascript·edge·pdf·ecmascript·html5
西瓜拿铁好喝1 小时前
开源和闭源 AI 办公工具,分别适合谁
java·前端·数据库
IT_陈寒1 小时前
深入理解SpringBoot:核心原理与最佳实践
前端·人工智能·后端
风骏时光牛马2 小时前
大模型综合能力多维评测:性能、逻辑与落地表现对比
前端
liuchangng2 小时前
React 19 + Vite 6 实战:从教材 PDF 到 866 词间隔重复单词 App
前端·react.js·pdf·vite·开源项目
Dwzun2 小时前
基于SpringBoot3+Vue3的油莎豆种植管理系统
java·前端·vue.js·spring boot·后端·python·计算机网络