【每日一面】对 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 方法吗？
  1. /**
  2. * 手写Promise.race
  3. * @param {Iterable} iterable - 可迭代对象（如数组）
  4. * @returns {Promise} - 新的Promise对象
  5. */
  6. function myPromiseRace(iterable) {
  7.   // 1. 边界处理：参数必须是可迭代对象（检查是否有Symbol.iterator方法）
  8.   if (typeof iterable[Symbol.iterator] !== 'function') {
  9.     return new Promise((_, reject) => {
  10.       reject(new TypeError('Promise.race() 参数必须是可迭代对象'));
  11.     });
  12.   }
  14.   // 2. 返回新Promise
  15.   return new Promise((resolve, reject) => {
  16.     // 3. 遍历可迭代对象（用for...of兼容所有可迭代对象）
  17.     for (const item of iterable) {
  18.       // 4. 用Promise.resolve包装item，处理非Promise元素
  19.       Promise.resolve(item)
  20.         .then((value) => {
  21.           // 一旦有元素成功，立即resolve新Promise（后续元素不再处理）
  22.           resolve(value);
  23.         })
  24.         .catch((reason) => {
  25.           // 一旦有元素失败，立即reject新Promise（后续元素不再处理）
  26.           reject(reason);
  27.         });
  28.     }
  29.   });
  30. }

  复制代码
• Promise 还有什么方法？有什么差异？
  参考扩展延伸部分
  
• 一个 Promise 可以多次 resolve 吗？
  可以多次执行 resolve 或 reject，但是 Promise 的状态只会改变一次，就是第一次执行 resolve的时候，后续虽然会执行 resolve，但是不影响状态，没有作用。
  
• 用 Promise.race 实现超时控制时，若超时后原请求仍在继续，会有什么问题？如何解决？
  出现资源浪费，Promise.race 仅感知超时并返回结果，但是原请求依旧会继续执行，可以结合axios的CancelToken或AbortController取消请求去中断。
  
• 如何用 Promise 实现‘重试机制’？比如接口请求失败后，重试 3 次，每次间隔 2 秒。
  1. /**
  2. * Promise重试机制
  3. * @param {Function} requestFn - 请求函数（返回Promise）
  4. * @param {number} maxRetry - 最大重试次数
  5. * @param {number} interval - 重试间隔（毫秒）
  6. * @param {number} currentRetry - 当前重试计数（默认0，内部使用）
  7. * @returns {Promise} - 最终请求结果
  8. */
  9. function promiseRetry(requestFn, maxRetry = 3, interval = 2000, currentRetry = 0) {
  10.   return new Promise((resolve, reject) => {
  11.     requestFn()
  12.       .then(resolve) // 请求成功，直接返回结果
  13.       .catch((err) => {
  14.         // 若已达最大重试次数，抛出最终错误
  15.         if (currentRetry >= maxRetry) {
  16.           reject(new Error(`重试${maxRetry}次后仍失败：${err.message}`));
  17.           return;
  18.         }
  20.         // 未达最大次数，延迟后重试
  21.         console.log(`请求失败，${interval}ms后重试（第${currentRetry+1}次）`);
  22.         setTimeout(() => {
  23.           // 递归调用，当前重试计数+1
  24.           promiseRetry(requestFn, maxRetry, interval, currentRetry + 1)
  25.             .then(resolve)
  26.             .catch(reject);
  27.         }, interval);
  28.       });
  29.   });
  30. }
  32. // 调用示例：请求失败后重试3次，每次间隔2秒
  33. const fetchData = () => {
  34.   // 模拟接口请求（50%概率失败）
  35.   return new Promise((resolve, reject) => {
  36.     setTimeout(() => {
  37.       if (Math.random() > 0.5) {
  38.         resolve('请求成功结果');
  39.       } else {
  40.         reject(new Error('接口返回错误'));
  41.       }
  42.     }, 1000);
  43.   });
  44. };
  46. promiseRetry(fetchData, 3, 2000)
  47.   .then((res) => console.log('最终结果：', res))
  48.   .catch((err) => console.log('最终失败：', err.message));

  复制代码

友情链接：webfem.com
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

感谢发布原创作品，程序园因你更精彩