Promise.race()原理解析及使用指南
发布网友
发布时间：2024-10-01 11:02
共1个回答
热心网友
时间：2024-10-23 09:19
Promise对象是ECMAScript6中新增的对象，主要将JavaScript中的异步处理对象和处理规则进行了规范化。本文介绍Promise中的Promise.race(Promises)方法，顾名思义就是赛跑的意思，Promise.race([p1,p2,p3])里面promise数组那个执行完成得快就获取那个的结果，不管结果本身是成功履行状态还是失败拒绝状态，只输出最快的promise。
下面来看看Promise.race()是如何工作的。
1.工作原理Promise.race()返回一个promise，一旦迭代器中的某个promise履行或拒绝，返回的promise就会履行或拒绝。
函数接受一个promise数组（或通常是一个可迭代的）作为参数，如下：
constracePromise=Promise.race(promises);当所有输入promises中有一个promise快速被履行或拒绝时，racePromise就会解析快速完成的promise结果（履行或拒绝）：
可以使用then方法提取racePromise的结果：
racePromise.then((fastValue)=>{fastValue//快速完成的promise});也可以使用async/await语法：
constfastPromise=awaitracePromise;fastPromise;//快速完成的promisePromise.race()返回的承诺和最先完成的承诺信息一致。
Promise.race()和Promise.any()的不同：Promise.race()承诺列表中寻找第一个履行或拒绝的承诺；Promise.any()是从承诺列表中查找第一个履行的承诺。
2.使用指南现在来深入介绍Promise.race()的使用之前，同样先来定义2个简单的函数。
functionresolveTimeout(value,delay){returnnewPromise((resolve)=>setTimeout(()=>resolve(value),delay));}functionrejectTimeout(reason,delay){returnnewPromise((r,reject)=>setTimeout(()=>reject(reason),delay));}接下来使用上面定义的2个辅助函数来试试Promise.race()。
2.1完成所有promises下面定义了一个promise数组racePromise，所有的promise都能够成功的resolve值，如下：
constfruits=["potatoes","tomatoes"];constvegetables=["oranges","apples"];constracePromise=Promise.race([resolveTimeout(fruits,5000),resolveTimeout(vegetables,1000),]);//等待1秒...constlist=async()=>{try{constfastPromise=awaitracePromise;console.log(fastPromise);}catch(error){console.log(error);}};list();//['oranges','apples']从上面执行的结果来看Promise.race()返回最快履行的promise的resolve结果。
2.2一个promise被rejected将上面第一个promise出现异常被rejected，如下代码：
constfruits=["potatoes","tomatoes"];constracePromise=Promise.race([resolveTimeout(fruits,2000),rejectTimeout(newError("Vegetablesisempty"),1000),]);//等待1秒...constlist=async()=>{try{constfastPromise=awaitracePromise;console.log(fastPromise);}catch(error){console.log(error);}};list();//Error:Vegetablesisempty从上面的结果看，最先完成的promise被rejected，那么fastPromise返回的promise也是被rejected。
下面将rejected的承诺时间延长到5秒，如下：
constfruits=["potatoes","tomatoes"];constracePromise=Promise.race([resolveTimeout(fruits,2000),rejectTimeout(newError("Vegetablesisempty"),5000),]);//等待2秒...constlist=async()=>{try{constfastPromise=awaitracePromise;console.log(fastPromise);}catch(error){console.log(error);}};list();//['potatoes','tomatoes']从上面执行结果看到，最快完成的promise履行了resolve，那么fastPromise返回的promise也是履行了resolve。
2.3所有promises被rejected将上面所有的promises出现异常被rejected，如下代码：
constracePromise=Promise.race([rejectTimeout(newError("Fruitsisempty"),2000),rejectTimeout(newError("Vegetablesisempty"),1000),]);//等待1秒...constlist=async()=>{try{constfastPromise=awaitracePromise;console.log(fastPromise);}catch(error){console.log(error);}};list();//Error:Vegetablesisempty从结果来看，虽然两个承诺都被拒绝了，fastPromise返回的promise是最快被拒绝的。
3.使用场景3.1.性能测试在有异步操作的项目中，在对于网络或数据库请求进行性能进行优化的时候，可以使用Promises来测试其优化效果，通过使用Promise.race()来测试两种不同的方法的响应速度。
3.2最佳选择例如获取同一类型的数据有多个请求服务器，同时向多个服务器发送请求，只要其中一个完成工作，就将其数据呈现，达到选择最佳线路的效果。这是可以使用Promise.race()同时执行promise并在第一个成功后立即完成。
总结文章介绍了Promise.race()原理和使用，另外增加了2个可能用得到的场景，而Promise.race()和Promise.any()之间的基本区别在于，Promise.race()为第一个已解决和已拒绝的promise执行回调函数，而Promise.any()为第一个已履行的promise执行回调函数，如果没有履行的promise则拒绝一个特殊属性AggregateError。
