首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使Promise.race仅在一次成功时结束

Promise.race是一个用于处理多个Promise对象的方法,它返回一个新的Promise对象,该对象将与第一个解决或拒绝的Promise对象具有相同的状态。

在使用Promise.race时,我们可以通过以下步骤使其仅在一次成功时结束:

  1. 创建一个空数组promises来存储所有的Promise对象。
  2. 创建一个新的Promise对象racePromise,作为Promise.race的返回值。
  3. 创建一个变量resolved,用于标记是否已经有Promise对象成功解决。
  4. 遍历传入的Promise对象数组,对于每个Promise对象,执行以下操作:
    • 将Promise对象添加到promises数组中。
    • 为每个Promise对象添加一个解决处理程序,该处理程序将执行以下操作:
      • 如果resolved为true,则忽略该Promise对象。
      • 否则,将resolved设置为true,并使用Promise.resolve将racePromise解决为该Promise对象的解决值。
    • 为每个Promise对象添加一个拒绝处理程序,该处理程序将执行以下操作:
      • 如果resolved为true,则忽略该Promise对象。
      • 否则,将resolved设置为true,并使用Promise.reject将racePromise拒绝为该Promise对象的拒绝原因。
  • 返回racePromise作为Promise.race的结果。

这样,当有一个Promise对象成功解决时,racePromise将立即解决为该Promise对象的解决值,并且不会再考虑其他Promise对象的状态。

以下是一个示例代码:

代码语言:txt
复制
function racePromises(promises) {
  const racePromise = new Promise((resolve, reject) => {});
  const resolved = false;
  const resolvedHandler = (value) => {
    if (!resolved) {
      resolved = true;
      resolve(value);
    }
  };
  const rejectedHandler = (reason) => {
    if (!resolved) {
      resolved = true;
      reject(reason);
    }
  };

  const promisesArray = promises.map((promise) => {
    promise.then(resolvedHandler).catch(rejectedHandler);
    return promise;
  });

  return racePromise;
}

// 使用示例
const promise1 = new Promise((resolve) => setTimeout(resolve, 1000, 'Promise 1 resolved'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 2000, 'Promise 2 resolved'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 3000, 'Promise 3 resolved'));

const promises = [promise1, promise2, promise3];

const racePromise = racePromises(promises);

racePromise.then((value) => {
  console.log('Race promise resolved:', value);
}).catch((reason) => {
  console.log('Race promise rejected:', reason);
});

在上述示例中,我们创建了三个延迟不同的Promise对象,并使用racePromises函数对它们进行处理。由于promise1是第一个解决的Promise对象,racePromise将立即解决为'Promise 1 resolved'

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【MDN学习】JavaScript 之 Promise

当你有多个异步任务执行时,需要有某个任务失败就立刻停止,就可以使用 Promise.all() 用官方的话说,``Promise.all()更适合彼此相互依赖或者在其中任何一个reject`立即结束...Promise.any() 当前实验性功能,并不被所有游览器支持 这个方法用于返回第一个成功的 promise 。...只要传入的迭代对象中的任何一个 promise 变成成功(resolve)状态,或者其中的所有的 promises 都失败,那么返回的 promise 就会 异步地(当调用栈为空) 变成成功/失败(resolved...在promise结束,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。...这避免了同样的语句需要在then()和catch()中各写一次的情况。

92120
  • Promise 推荐实践 - 进阶篇:并发控制

    项目规模较大,某些意外流程可能因此使循环无法如预期结束而导致失控。 因此,我们的理想处理方案应该是: 提供类似 Array.forEach() 的便捷语法; 可以控制多个任务并发执行,提高效率。...那我们如果将它们结合一下,在每次迭代开始先 await 前一次迭代的 Promise 完成,以此类推不是就能完成每个任务之间逐个等待完成,直到最终任务完成了?...这里我们使用 Promise.race() 来处理任务池,就可以在其中任一任务结束进行响应处理,基本思路如下: /** 并发数量限制 */ const concurrent = 3; /** 任务池...resolve 立刻 resolve(浏览器兼容性 chrome >= 85); Promise.race() 在任一成员被 resolve 或 reject ,立刻返回相同结果(浏览器兼容性 chrome...,我们没法直到哪些任务被成功完成、哪一些失败了。

    81851

    JavaScript Promise

    这种写法是不是比我们嵌套回调地狱优美多啦~ promiseTest(false) .catch((value) => promiseTest(true)) .then(() => console.log('第一次调用失败后尝试第二次成功了...A 失败后的处理B 失败后的处理C 第一次调用失败后尝试第二次成功了!...在 Promise 结束,无论结果是 fulfilled 或者是 rejected,都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。...Promise.race Promise.race(iterable) 方法返回一个 Promise,一旦迭代器中的某个 Promise 解决或拒绝,返回的 Promise 就会解决或拒绝。...Promise.any() 与 Promise.race() 方法不同,Promise.race() 方法主要关注 Promise 是否已解决,而不管其被解决(成功)还是被拒绝(失败)。

    23910

    记得有一次面试被虐的题,Promise 完整指南

    首页 专栏 javascript 文章详情 11 记得有一次面试被虐的题,Promise 完整指南 ?...当在 promise 实例中使用.then方法,可以在Promise “完成” 得到通知。 让我们来看一个例子。 Promise 仅仅只是回调? 并不是。...Promise then then方法可以让异步操作成功或失败得到通知。 它包含两个参数,一个用于成功执行,另一个则在发生错误时使用。...使用 Promise.race,最先执行完成就会结果最后的返回结果。 你可能会问:Promise.race的用途是什么? 我没胡经常使用它。...另一种方法是创建一个链,然后仅在以下情况下添加它们: const chain = Promise.resolve(); if (shouldExecA) chain = chain.then(a);

    2.3K20

    js 大文件上传的思路

    并发控制 结合Promise.race和异步函数实现,限制多个请求同时并发的数量,防止浏览器内存溢出; let pool = []//并发池 let max = 3 //最大并发量...url: '/upload', data: formData }) task.then((data) => { //请求结束后将该...pool.push(task) if (pool.length === max) { //每当并发池跑完一个任务,就再塞入一个任务 await Promise.race...断点续传 把所有上传失败的小文件加入一个数组里面,在所有小文件都上传结束成功和失败都算结束)之后再上传一次上传失败了的小文件,反复执行这一步,直到所有小文件都上传成功,可以通过递归实现。...pool.push(task) if (pool.length === max) { //每当并发池跑完一个任务,就再塞入一个任务 await Promise.race

    6.9K20

    JavaScript 中的可迭代对象与迭代器是啥

    迭代器在实例化时不计算每个项目的值,仅在请求才生成下一个值。 这非常有用,特别是对于大型数据集或无限个元素的序列。 可迭代对象 可迭代对象是希望其元素可被公众访问的数据结构。...为了使对象成为迭代器,它必须实现next()方法。 迭代器可以实现return()方法,我们将在本文后面讨论这个问题。...最后一次调用返回{done:true},这意味着迭代器现在已被使用,不再产生任何值。...it = createRangeIterator(1, 3) for (const i of it) { console.log(i) } 无限序列迭代器 迭代器可以表示无限制大小的序列,因为它们仅在需要才计算值...,JS 将尝试消费迭代器,由于迭代器是无限的,因此它将永远不会结束

    1.6K20

    当面试官问你Promise的时候,他究竟想听到什么?

    ●如果向Promise.all()和Promise.race()传递空数组,运行结果会有什么不同?...所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。...3.调用回调次数过少或过多 Promise的定义方式使得它只能被决议一次。即使代码中出现多次决议,这个Promise也会接受第一次决议,并会忽略掉其他任何后续调用。...如果向Promise.all()和Promise.race()传递空数组,运行结果会有什么不同?...如果是一个立即值,如一个普通变量,那么该Promise会立即决议为成功。 如果是一个Promise值,那么会将该Promise直接返回赋值给这个Promise,不会有额外开销。

    2.7K50

    JavaScript ES2021 最值得期待的 5 个新特性解析

    数值分隔符 大数字文字很难使人眼快速解析,尤其是当有很多重复的数字: 1000000000000 1019436871.42 为了提高可读性,新的 JavaScript 语言功能 启用了下划线作为数字文字中的分隔符...如果您不在乎承诺的状态,而只是想知道工作何时完成,无论它是否成功,这都是很有用的。...类似——只要给定的迭代中的一个 promise 成功,就采用第一个 promise 的值作为它的返回值,但与 Promise.race 的不同之处在于——它会等到所有 promise 都失败之后,才返回失败的值...只有当 所有 请求都失败,我们才最终进入代码 catch 块,然后在其中处理错误。 Promise.any 拒绝可以一次代表多个错误。...WeakMap 仅在键被垃圾回收之后,才弱引用它的内容。

    63110

    初学者应该看的JavaScript Promise 完整指南

    当在 promise 实例中使用.then方法,可以在Promise “完成” 得到通知。 让我们来看一个例子。 Promise 仅仅只是回调? 并不是。...✅ Fulfilled:操作成功,它调用.then回调,例如.then(onSuccess)。 ⛔️ Rejected: 操作失败,它调用.catch或.then的第二个参数(如果有)。...Promise then then方法可以让异步操作成功或失败得到通知。 它包含两个参数,一个用于成功执行,另一个则在发生错误时使用。...使用 Promise.race,最先执行完成就会结果最后的返回结果。 你可能会问:Promise.race的用途是什么? 我没胡经常使用它。...另一种方法是创建一个链,然后仅在以下情况下添加它们: const chain = Promise.resolve(); if (shouldExecA) chain = chain.then(a);

    3.3K30

    JavaScript的异步编程之Promise

    捕获异常 onRejected 回调会在Promise执行异常或者抛出的异常触发, 捕获异常有两种方式,第一种, then(成功处理的回调函数, 异常处理的回调函数) 在then方法中传递两个回调函数...值得注意的是只有数组中的所有Promise都成功结束了,Promise.all返回的Promise对象才会成功结束。..., Promise.race只会等待第一个结束的任务而结束 const request = ajax('/api/???')...,而Promise.race就是以第一个结束的Promise而结束 Promise.allSettled 与 Promise.all、Promise.race方法一样也是接收一个数组,这些元素都是一个Promise...对象,这个方法会返回一个全新的Promise对象,与他们不同的是无论这些Promise执行是成功还是失败都是等这些Promise都完成了之后才会完成,当有多个彼此不依赖的异步任务成功完成,或者总是想知道每个

    65770

    关于 JavaScript 中的 Promise

    在执行过程中,当一个 Promise 被解决为 Fulfilled 或 Rejected 状态,它的状态将不再改变,并且它的结果(成功的值或失败的原因)将被传递给注册的 .then() 或 .catch...在异步操作成功,我们调用resolve函数,并传递一个成功的消息;在异步操作失败,我们调用reject函数,并传递一个失败的消息。...():在任意一个 Promise 被兑现时兑现;仅在所有的 Promise 都被拒绝才会拒绝。...Promise.race() :在任意一个 Promise 被敲定时敲定。换句话说,在任意一个 Promise 被兑现时兑现;在任意一个的 Promise 被拒绝拒绝。...避免回调嵌套: 使用 Promise 可以避免回调函数的嵌套问题,使代码更具可维护性。这样的代码结构更容易理解,减少了代码膨胀和复杂性。

    68263

    一个小白的角度看JavaScript Promise 完整指南

    当在 promise 实例中使用.then方法,可以在Promise “完成” 得到通知。让我们来看一个例子。 Promise 仅仅只是回调? 并不是。...✅ Fulfilled:操作成功,它调用.then回调,例如.then(onSuccess)。 ⛔️ Rejected: 操作失败,它调用.catch或.then的第二个参数(如果有)。...Promise then then方法可以让异步操作成功或失败得到通知。它包含两个参数,一个用于成功执行,另一个则在发生错误时使用。...使用 Promise.race,最先执行完成就会结果最后的返回结果。 你可能会问:Promise.race的用途是什么? 我没胡经常使用它。...另一种方法是创建一个链,然后仅在以下情况下添加它们: const chain = Promise.resolve(); if (shouldExecA) chain = chain.then(a);

    3.6K31

    JS中的Callback VS Promise

    CallBack 和Promise之间的区别 两者之间的主要区别在于,使用回调方法,我们通常只是将回调传递给一个函数,该函数将在完成被调用以获取某些结果。...回调地狱 使用回调方法的一个常见问题是,当我们最终不得不一次执行多个异步操作,我们很容易以所谓的回调地狱告终,这可能会成为噩梦,因为它导致难以管理且难读取。换句话说,这是每个开发者的噩梦。...满足此目标的Promise方法就是Promise.all Promise.all能够在所有操作成功结束,搜集操作结构。...这仅在此处类似于Promise.allSettled 。如果这些操作中的某一项或者多项失败,则Promise将拒绝并显示错误。最终,这会出现在.catchPromise 链中。...这意味着您将总是以数组数据类型结束

    5.3K21

    JavaScript手写Promise、Promise.then()、Promise.all()、Promise.race()

    那么,怎么保证后一个then里的方法在前一个then(可能是异步)结束之后再执行呢?...this const self = this; return new MyPromise((resolve, reject) => { //封装前一个Promise成功执行的函数...实例的数组或具有Iterator接口的对象作为参数 这个方法返回一个新的Promise对象 遍历传入的参数,用Promise.resolve()将参数“包一层”,使其变成一个Promise对象 参数所有回调成功才是成功...因为Promise的状态只能改变一次,那么我们只需要把Promise.race中产生的Promise对象的resolve,注入到数组中的每一个Promise实例中的回调函数即可。...Promise.race=function (args){ return new Promise((resolve,reject)=>{ for(let i=0,len=args.length

    96410

    ES6模块化与异步编程

    ./01_test.js' // 输出 { n1:10,n2:20,show:[funtion:show] } console.log(test) 每个模块中,只允许使用唯一的一次 export default...,失败的回调函数) p.then(result => { }, error => { }) 调用 .then() 方法成功的回调函数是必选的、失败的回调函数是可选的 基于回调函数按顺序读取文件内容...() 方法 Promsie 方法 ::: tip Promise.all() 方法会发起并行的 Promise 异步操作,等所有的异步操作全部结束后才会执行下一步的 .then操作(等待机制) :::.../files/3.txt", "utf8"), ]; // 将数组 作为 promise.race() 参数 Promise.race(promiseArr) .then((results) => {...首先,需要取号之后进行排队 宏任务队列 假设当前银行网点只有一个柜员,小云在办理存款业务,小腾只能等待 单线程,宏任务按次序执行 小云办完存款业务后,柜员询问他是否还想办理其它业务?

    56210

    初识Promise

    Promise,简单来说,他就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。ES6将其写进了语言标准,并原生提供了Promise对象。...此外Promise对象还对外提供了统一的接口,使控制异步操作更加容易。 Promise也有一些缺点,它一旦开始他就会立即执行,并且无法取消。这个很Promise!...resolve的作用是,将Promise从未完成(Pending)状态变成已成功(Fulfilled)状态,在异步操作成功时调用,并把异步操作的结果作为参数传递出去。...Promise.race Promise.race方法也是将多个Promise实例包装成一个新的Promise实例。...需要注意,立即resolve的Promise对象是在本轮事件循环结束么不也是下一轮事件循环开始

    52710

    这次聊聊Promise对象

    1.Promise的基本知识 1.1 三种状态 Pending:进行中,刚创建一个Promise实例,表示初始状态; resolved(fulfilled):resolve方法调用的时候,表示操作成功...汇总上述,创建一个Promise的实例是这样的: //创建promise的实例 let promise = new Promise((resolve,reject)=>{ //刚创建实例的状态...只有当参数中的实例对象的状态都为fulfilled,Promise.all( )才会有返回。 实例代码(可直接在浏览器中打开): <!...请求C结束后,再向上到请求B结束,请求B结束后,再向上到请求A结束。 这样虽然可以完成任务,但是代码层层嵌套,代码可读性差,也不便于调试和后续的代码维护。...类方法:Promise.all()、Promise.race()。如有问题,欢迎指正。

    2.4K560
    领券