尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

【每日一面】对 Promise.race 的理解

【每日一面】对 Promise.race 的理解
📅 发布时间:2026/6/22 9:19:42

基础问答

问:有使用过 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 的核心特性,也是所有方法设计的基础。

状态变化规则:

  1. 只能从pending转为fulfilled,或从pending转为rejected;
  2. 一旦状态转为fulfilled或rejected,就会 “凝固”,后续无法再改变状态;
  3. 状态变化时,会触发对应的回调函数(then的成功回调、catch的失败回调)。

Promise 的核心实例方法:

  1. then 方法:处理成功 / 失败结果
  2. catch 方法:专门处理失败结果,catch(onRejected) 等价于then(null, onRejected),是处理rejected状态的语法糖;
  3. 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)。

面试追问

  1. 知道定义,能手写一个 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. 返回新Promisereturn 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);});}});
    }
    
  2. Promise 还有什么方法?有什么差异?
    参考扩展延伸部分

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

  4. 用 Promise.race 实现超时控制时,若超时后原请求仍在继续,会有什么问题?如何解决?
    出现资源浪费,Promise.race 仅感知超时并返回结果,但是原请求依旧会继续执行,可以结合axios的CancelToken或AbortController取消请求去中断。

  5. 如何用 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(() => {// 递归调用,当前重试计数+1promiseRetry(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));
    

本文首发于个人站点,公众号订阅请关注:

公众号图片
友情链接:webfem.com

相关新闻

  • 在AI技术唾手可得的时代,挖掘新需求成为制胜关键——某知名1位量化AI框架需求探索
  • 2025 年幕墙灯饰画,灯饰画设计,背胶灯饰画厂家最新推荐,聚焦资质、案例、售后的五家机构深度解读
  • 2025 年墙体灯饰画,led 灯饰画,灯饰画定制,大型灯饰画 厂家最新推荐,聚焦资质、案例、售后的五家机构深度解读!

最新新闻

  • 2026年紫铜块回收新趋势:变废为宝的财富密码 - 品牌优选官
  • Java异常处理实战:从面试题到生产级故障治理
  • 2026年EI论文辅导机构哪家强?实测10家机构,权威性、性价比深度解析 - 艾德思Editsprings
  • Hermes大模型网关本地部署指南:Docker+Rust双轨实战
  • 2026年研究生论文辅导保过机构TOP10:口碑、师资、成功率全维度实测! - 艾德思Editsprings
  • LlamaFactory训练管线深度解析:从数据加载到损失计算的全流程

日新闻

  • 2026速览惠州叛逆青少年学校前十大排名名单出炉 - 武汉中职最新信息发布
  • 2026上饶白蚁消杀哪家好?15年本土2大权威白蚁防治公司推荐(金盾虫控/青蚁卫士) - 我叫一
  • 天龙八部单机版终极数据管理工具:5个技巧快速掌握游戏数据编辑

周新闻

  • Visual C++运行库修复终极指南:5分钟快速解决Windows软件启动错误
  • 手把手教你构建统计局地区经济数据爬虫:从环境搭建到数据持久化全指南
  • 2026多Agent深度解析:用AI团队替代单一模型,四种架构实战落地

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号