Promise.all()方法和Promise.race()方法有什么区别?

简介: Promise.all()方法和Promise.race()方法有什么区别?

Promise.all()Promise.race() 都是 Promise 提供的两个个静态方法,均用于处理多个异步任务,但它们的核心行为和适用场景有显著区别:

1. 核心行为差异

特性 Promise.all(iterable) Promise.race(iterable)
触发条件 等待所有 Promise 都变为 fulfilled 才成功 只要第一个完成的 Promise(无论成功或失败)就触发
结果返回 返回所有 Promise 的结果数组(按传入顺序) 返回第一个完成的 Promise 的结果(成功值或错误原因)
失败处理 只要有一个 Promise 失败,立即返回该错误(快速失败) 第一个失败的 Promise 会直接导致整体失败

2. 代码示例对比

(1)Promise.all():等待所有完成

const p1 = new Promise(resolve => setTimeout(() => resolve("p1完成"), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve("p2完成"), 2000));
const p3 = new Promise(resolve => setTimeout(() => resolve("p3完成"), 1500));

Promise.all([p1, p2, p3])
  .then(results => {
   
    console.log("所有完成:", results); 
    // 输出:所有完成:["p1完成", "p2完成", "p3完成"](约2秒后,等待最慢的p2)
  });

(2)Promise.race():以第一个完成的为准

const p1 = new Promise(resolve => setTimeout(() => resolve("p1完成"), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve("p2完成"), 2000));
const p3 = new Promise((_, reject) => setTimeout(() => reject("p3失败"), 500)); // 最快完成(失败)

Promise.race([p1, p2, p3])
  .then(result => {
   
    console.log("第一个成功:", result); // 不会执行
  })
  .catch(error => {
   
    console.error("第一个结果是错误:", error); // 输出:第一个结果是错误:p3失败(500ms后)
  });

3. 适用场景

  • Promise.all()
    适合需要所有异步任务都完成后再处理结果的场景,例如:

    • 并行请求多个接口,合并数据后渲染页面;
    • 批量上传多个文件,全部完成后提示“上传成功”。
  • Promise.race()
    适合只关心第一个完成的任务结果的场景,例如:

    • 设置请求超时时间(将接口请求与一个定时器 Promise 竞速,超时则触发失败);
    • 从多个镜像服务器请求资源,使用第一个返回的结果。

总结

  • Promise.all() 是“全成则成,一败则败”,强调等待所有任务完成。
  • Promise.race() 是“先到为准,不论成败”,强调获取第一个完成的结果。

两者均为处理并发异步任务的重要工具,需根据具体场景选择使用。

目录
相关文章
|
前端开发 JavaScript
Promise.allSettled()方法和Promise.all()方法有什么区别?
Promise.allSettled()方法和Promise.all()方法有什么区别?
703 123
|
缓存 JavaScript 算法
vue2和vue3之间diff算法的差异
vue2和vue3之间diff算法的差异
|
前端开发 JavaScript
富文本编辑器wangEdiotr,编辑内容后,重新打开报错Uncaught (in promise) Error: Cannot find a descendant at path
富文本编辑器wangEdiotr,编辑内容后,重新打开报错Uncaught (in promise) Error: Cannot find a descendant at path
2940 1
|
前端开发
Promise.all()方法的作用是什么?
Promise.all()方法的作用是什么?
823 121
|
8月前
|
网络协议 前端开发 JavaScript
HTTP/2 特点解析,从 HTTP/1.1 的痛点到新一代协议的进化
HTTP/2 解决 HTTP/1.1 队头阻塞、低效传输等痛点,通过多路复用、二进制帧、头部压缩等技术大幅提升加载速度,支持服务器推送与流优先级,优化用户体验。虽仍受制于 TCP 丢包问题,但已是当前主流高性能协议,为迈向 HTTP/3 奠定基础。
976 159
|
前端开发
Promise.allSettled()方法和Promise.race()方法有什么区别?
`Promise.allSettled()` 提供了一种更全面、更详细的方式来处理多个 `Promise`,而 `Promise.race()` 则更强调速度和竞争。我们需要根据具体的需求来选择使用哪种方法。
728 155
|
JavaScript 前端开发
__proto__和prototype的区别
`prototype`和`__proto__`虽然都与JavaScript的原型继承和对象关系密切相关,但它们的定义、所属对象、作用和功能等方面存在着明显的区别。理解它们之间的区别对于深入掌握JavaScript的面向对象编程和原型链机制非常重要
|
12月前
|
存储 网络协议 算法
从HPACK到多路复用,揭秘HTTP/2如何终结网络拥堵
HTTP/2通过HPACK压缩头部冗余信息,提升传输效率;并利用多路复用技术,在单个TCP连接上并行处理多个请求,避免队头阻塞,显著提升性能。同时支持服务器推送和流优先级设置,优化资源加载体验。
693 7
|
监控 前端开发 JavaScript
Sentry 监控部署与使用(详细流程)
Sentry 监控部署与使用(详细流程)
3533 0
|
资源调度 前端开发 JavaScript
第十章(应用场景篇) Single-SPA微前端架构深度解析与实践教程
第十章(应用场景篇) Single-SPA微前端架构深度解析与实践教程
1106 0

热门文章

最新文章