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

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

目录
相关文章
|
20天前
|
前端开发
Promise.allSettled()方法的语法是什么?
Promise.allSettled()方法的语法是什么?
226 117
|
20天前
|
前端开发
Promise.all()方法接收的可迭代对象中,如果有一个Promise被拒绝,会发生什么?
Promise.all()方法接收的可迭代对象中,如果有一个Promise被拒绝,会发生什么?
209 108
|
20天前
|
前端开发 JavaScript
Promise.allSettled()方法和Promise.all()方法有什么区别?
Promise.allSettled()方法和Promise.all()方法有什么区别?
265 123
|
18天前
|
缓存 JavaScript 前端开发
JavaScript 的三种引入方法详解
在网页开发中,JavaScript 可通过内联、内部脚本和外部脚本三种方式引入 HTML 文件,各具适用场景。本文详解其用法并附完整示例代码,帮助开发者根据项目需求选择合适的方式,提升代码维护性与开发效率。
276 111
|
20天前
|
自然语言处理 前端开发 JavaScript
js异步
js异步
441 108
|
20天前
|
前端开发
Promise.all()方法的作用是什么?
Promise.all()方法的作用是什么?
248 121
|
10天前
|
JSON 监控 API
掌握使用 requests 库发送各种 HTTP 请求和处理 API 响应
本课程全面讲解了使用 Python 的 requests 库进行 API 请求与响应处理,内容涵盖环境搭建、GET 与 POST 请求、参数传递、错误处理、请求头设置及实战项目开发。通过实例教学,学员可掌握基础到高级技巧,并完成天气查询应用等实际项目,适合初学者快速上手网络编程与 API 调用。
244 130
|
11天前
|
机器学习/深度学习 数据采集 算法
【风电功率预测】【多变量输入单步预测】基于RVM-Adaboost的风电功率预测研究(Matlab代码实现)
【风电功率预测】【多变量输入单步预测】基于RVM-Adaboost的风电功率预测研究(Matlab代码实现)
198 129
|
11天前
|
编解码 算法 自动驾驶
【雷达通信】用于集成传感和通信的OFDM雷达传感算法(Matlab代码实现)
【雷达通信】用于集成传感和通信的OFDM雷达传感算法(Matlab代码实现)
235 125