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() 是“先到为准,不论成败”,强调获取第一个完成的结果。

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

目录
相关文章
|
3月前
|
前端开发 JavaScript
Promise.allSettled()方法和Promise.all()方法有什么区别?
Promise.allSettled()方法和Promise.all()方法有什么区别?
385 123
|
3月前
|
前端开发
Promise.all()方法接收的可迭代对象中,如果有一个Promise被拒绝,会发生什么?
Promise.all()方法接收的可迭代对象中,如果有一个Promise被拒绝,会发生什么?
263 108
|
3月前
|
自然语言处理 前端开发 JavaScript
js异步
js异步
582 108
|
3月前
|
前端开发
Promise.all()方法的作用是什么?
Promise.all()方法的作用是什么?
336 121
|
3月前
|
XML JSON 数据库
大模型不听话?试试提示词微调
想象一下,你向大型语言模型抛出问题,满心期待精准回答,得到的却是答非所问,是不是让人抓狂?在复杂分类场景下,这种“大模型不听话”的情况更是常见。
262 9
|
3月前
|
缓存 Java Spring
Spring循环依赖:当两个Bean陷入鸡生蛋死循环时...
Spring中循环依赖问题常见于Bean相互依赖时,尤其在单例模式下。文章深入解析了循环依赖的成因及Spring的三级缓存解决方案,帮助理解Bean生命周期与依赖管理。
|
3月前
|
开发工具 git
解决 VSCode 安装通义灵码后左侧菜单栏不显示按钮的问题
在 VSCode 中安装通义灵码插件后,若左侧活动栏未显示图标,可通过右键选中代码触发插件面板,并将其图标拖至左侧栏固定,便于后续快速使用。
1456 116
|
3月前
|
前端开发 JavaScript
JavaScript中的Async/Await:简化异步编程
JavaScript中的Async/Await:简化异步编程
359 109