news 2026/10/15 2:51:05

对 Promise.race 的理解

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
对 Promise.race 的理解

基础问答

问:有使用过 Promise.race 吗,说说他的作用。

答:Promise.race 接收一个 Promise 数组(或者一个具有迭代器的对象)作为参数,返回一个新的Promise,这个新的 Promise 结果是数组中第一个状态变更的Promise对象,无所谓这个状态是否是成功(fulfilled)还是失败(rejected)。后续Promise数组中的其他Promise对象状态变更都不再关注。

扩展延伸

Promise 基础

Promise 是 ES6 引入的异步编程解决方案,用于表示一个异步操作的最终完成(或失败)及其结果值。它的核心价值是:

解决 “回调地狱”:将嵌套的回调逻辑转为链式调用(then链),代码更清晰;

统一异步操作接口:无论异步操作是 “成功” 还是 “失败”,都通过统一的 Promise 对象处理,避免回调函数分拆(如成功回调、失败回调分离)。

Promise 有且仅有三种状态,且状态变化是单向不可逆的,这三种状态分别是:

pending(等待态):初始状态,异步操作未完成;

fulfilled(成功态):异步操作完成,Promise 状态从pending转为fulfilled,并携带成功结果(value);

rejected(失败态):异步操作失败,Promise 状态从pending转为rejected,并携带失败原因(reason)。

这是 Promise 的核心特性,也是所有方法设计的基础。

状态变化规则:

只能从pending转为fulfilled,或从pending转为rejected;

一旦状态转为fulfilled或rejected,就会 “凝固”,后续无法再改变状态;

状态变化时,会触发对应的回调函数(then的成功回调、catch的失败回调)。

Promise 的核心实例方法:

then 方法:处理成功 / 失败结果

catch 方法:专门处理失败结果,catch(onRejected) 等价于then(null, onRejected),是处理rejected状态的语法糖;

finally 方法:无论成功失败都执行

Promise静态方法

除了Promise.race,Promise 还有Promise.all/Promise.allSettled/Promise.resolve/Promise.reject 等静态方法,差异点见下表:

方法 核心作用 状态触发条件 返回值格式 适用场景

Promise.race 多个 Promise 竞争,取第一个完成的结果 任意一个 Promise 改变状态(fulfilled/rejected),立即触发对应状态 单个值(第一个 Promise 的 value/reason) 超时控制、请求降级

Promise.all 等待所有 Promise 成功,取全部结果 所有 Promise 都 fulfilled,才触发 fulfilled;任意一个 rejected,立即触发 rejected 数组(按原数组顺序排列的所有 value) 并行请求多个无依赖接口(如加载页面资源)

Promise.allSettled 等待所有 Promise 完成,取全部结果(无论成败) 所有 Promise 都改变状态(fulfilled/rejected),才触发 fulfilled 数组(每个元素含 status 和 value/reason) 需知道所有请求结果(如批量操作日志)

Promise.resolve 快速创建一个 fulfilled 状态的 Promise 无(直接返回 fulfilled 状态的 Promise) 单个 value(参数值,或参数 Promise 的 value) 统一 Promise 格式、转换同步值为异步

Promise.reject 快速创建一个 rejected 状态的 Promise 无(直接返回 rejected 状态的 Promise) 单个 reason(参数值) 快速抛出异步错误

与 async/await 的关系

async/await 本质是 Promise 的语法糖。

async 函数:修饰的函数返回值必然是 Promise(若 return 非 Promise 值,会用Promise.resolve()包装)

await 关键字:本质是 “等待 Promise 状态变化” 的语法糖,只能在 async 函数内部使用,后面跟 Promise 对象,会暂停 async 函数执行,直到 Promise 状态转为fulfilled,并将value作为 await 表达式的结果,如果 Promise 状态转为rejected,会抛出错误,需用try/catch捕获(等价于 Promise 的catch)。

面试追问

知道定义,能手写一个 Promise.race 方法吗?

/**

* 手写Promise.race

* @param {Iterable} iterable - 可迭代对象(如数组)

* @returns {Promise} - 新的Promise对象

*/

function myPromiseRace(iterable) {

// 1. 边界处理:参数必须是可迭代对象(检查是否有Symbol.iterator方法)

if (typeof iterable[Symbol.iterator] !== 'function') {

return new Promise((_, reject) => {

reject(new TypeError('Promise.race() 参数必须是可迭代对象'));

});

}

// 2. 返回新Promise

return new Promise((resolve, reject) => {

// 3. 遍历可迭代对象(用for...of兼容所有可迭代对象)

for (const item of iterable) {

// 4. 用Promise.resolve包装item,处理非Promise元素

Promise.resolve(item)

.then((value) => {

// 一旦有元素成功,立即resolve新Promise(后续元素不再处理)

resolve(value);

})

.catch((reason) => {

// 一旦有元素失败,立即reject新Promise(后续元素不再处理)

reject(reason);

});

}

});

}

Promise 还有什么方法?有什么差异?

参考扩展延伸部分

一个 Promise 可以多次 resolve 吗?

可以多次执行 resolve 或 reject,但是 Promise 的状态只会改变一次,就是第一次执行 resolve的时候,后续虽然会执行 resolve,但是不影响状态,没有作用。

用 Promise.race 实现超时控制时,若超时后原请求仍在继续,会有什么问题?如何解决?

出现资源浪费,Promise.race 仅感知超时并返回结果,但是原请求依旧会继续执行,可以结合axios的CancelToken或AbortController取消请求去中断。

如何用 Promise 实现‘重试机制’?比如接口请求失败后,重试 3 次,每次间隔 2 秒。

/**

* Promise重试机制

* @param {Function} requestFn - 请求函数(返回Promise)

* @param {number} maxRetry - 最大重试次数

* @param {number} interval - 重试间隔(毫秒)

* @param {number} currentRetry - 当前重试计数(默认0,内部使用)

* @returns {Promise} - 最终请求结果

*/

function promiseRetry(requestFn, maxRetry = 3, interval = 2000, currentRetry = 0) {

return new Promise((resolve, reject) => {

requestFn()

.then(resolve) // 请求成功,直接返回结果

.catch((err) => {

// 若已达最大重试次数,抛出最终错误

if (currentRetry >= maxRetry) {

reject(new Error(`重试${maxRetry}次后仍失败:${err.message}`));

return;

}

// 未达最大次数,延迟后重试

console.log(`请求失败,${interval}ms后重试(第${currentRetry+1}次)`);

setTimeout(() => {

// 递归调用,当前重试计数+1

promiseRetry(requestFn, maxRetry, interval, currentRetry + 1)

.then(resolve)

.catch(reject);

}, interval);

});

});

}

// 调用示例:请求失败后重试3次,每次间隔2秒

const fetchData = () => {

// 模拟接口请求(50%概率失败)

return new Promise((resolve, reject) => {

setTimeout(() => {

if (Math.random() > 0.5) {

resolve('请求成功结果');

} else {

reject(new Error('接口返回错误'));

}

}, 1000);

});

};

promiseRetry(fetchData, 3, 2000)

.then((res) => console.log('最终结果:', res))

.catch((err) => console.log('最终失败:', err.message));

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/15 20:59:10

java农村集体产权管理系统springboot-vue

文章目录具体实现截图主要技术与实现手段关于我本系统开发思路java类核心代码部分展示结论源码lw获取/同行可拿货,招校园代理 :文章底部获取博主联系方式!具体实现截图 同行可拿货,招校园代理 java农村集体产权管理系统springboot-vue 主要技术与…

作者头像 李华
网站建设 2026/10/15 17:33:41

【课程设计/毕业设计】基于SpringBoot+Vue的宠物健康咨询系统基于springboot的养宠物指南服务平台系统的设计与实现【附源码、数据库、万字文档】

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

作者头像 李华
网站建设 2026/10/15 1:23:06

最小二乘问题详解6:梯度下降法

4. 实例从上述求解过程可以看到&#xff0c;梯度下降法其实比之前文章中介绍的Gauss-Newton方法要简单很多&#xff0c;那么这里还是给出一个只使用Eigen实现梯度下降法求解非线性最小二乘问题的例子。例子中模型函数为f(x;θ)aebx&#xff1a;#include <Eigen/Dense>#in…

作者头像 李华
网站建设 2026/10/15 5:39:51

Kamailio转发机制

目录 一&#xff0e;Kamailio转发机制 1.有状态的请求转发 2.无状态的请求转发 3.有状态的响应转发 4.无状态的响应转发 二&#xff0e;示例 1.有状态的请求转发 2.无状态的请求转发 一&#xff0e;Kamailio转发机制 基于路由规则和SIP消息头&#xff08;可以是Request…

作者头像 李华
网站建设 2026/10/15 20:05:22

Thinkphp和Laravelpython桂平旅游管理系统vue

目录具体实现截图项目开发技术介绍PHP核心代码部分展示系统结论源码获取/同行可拿货,招校园代理具体实现截图 本系统&#xff08;程序源码数据库调试部署讲解&#xff09;带文档1万字以上 同行可拿货,招校园代理 Thinkphp和Laravelpython桂平旅游管理系统vue 项目开发技…

作者头像 李华
网站建设 2026/10/14 16:28:03

Linux设备树基础

Linux设备树基础笔记学习整理基于野火鲁班猫教程并且添加自己学习后理解的内容然后还有ai的一些总结。如果有说的不好或者不对的地方希望大家指正&#xff01;&#xff01;&#xff01;这是设备树的简略图&#xff0c;设备树的根节点扩张了许多子节点。有关设备树&#xff0c;D…

作者头像 李华