当前位置: 首页 > Web前端 > HTML

Promise.allSettled的Polyfill处理

时间:2023-04-02 19:53:42 HTML

如果浏览器太旧,不支持最新的Promise.allSettledAPI,我们可以使用polyfill技术,简单的使用Promise.all自己实现Promise.allSettled。完整代码实现如下:if(!Promise.allSettled){constrejectHandler=reason=>({status:'rejected',reason});constresolveHandler=value=>({status:'fulfilled',value});Promise.allSettled=function(promises){constconvertedPromises=promises.map(p=>Promise.resolve(p).then(resolveHandler,rejectHandler));}返回Promise.all(convertedPromises);};}在这段代码中,promises.map获取输入值,使用p=>Promise.resolve(p)将它们转换为Promises(以防传递非Promise类型的原始值),然后添加一个.then每个值的处理程序。此处理程序将成功的结果值转换为{status:'fulfilled',value}并将错误原因转换为{status:'rejected',reason}。这正是Promise.allSettled的格式。现在我们可以使用Promise.allSettled来获取所有给定Promise的结果,即使其中一些被拒绝。Promise.race类似于Promise.all,但只等待第一个已解决的Promise并获取其结果(或错误)。语法:letpromise=Promise.race(iterable);以下代码将打印第一个状态变为fulfilled的Promise的值,即1:Promise.race([newPromise((resolve,reject)=>setTimeout(()=>resolve(1),1000)),newPromise((resolve,reject)=>setTimeout(()=>reject(newError("Whoops!)),2000)),newPromise((resolve,reject)=>setTimeout(()=>resolve(3),3000))]).then(警报);//1这里第一个promise是最快的,所以就变成了result。在第一个确认的Promise赢得比赛后,所有进一步的结果/错误都将被忽略。Promise.any类似于Promise.race,但只等待第一个fulfilledPromise并获取其结果。如果所有给定的Promise都被拒绝,则返回的Promise将被拒绝并返回AggregateError-一个特殊的错误对象,它将所有Promise错误存储在其errors属性中。语法:letpromise=Promise.any(iterable);以下示例结果为1:Promise.any([newPromise((resolve,reject)=>setTimeout(()=>reject(newError("Whoops!")),1000)),newPromise((resolve,reject)=>setTimeout(()=>resolve(1),2000)),newPromise((resolve,reject)=>setTimeout(()=>resolve(3),3000))]).then(alert);//1这里的第一个promise是最快的,但是被拒绝了,所以第二个promise就变成了结果。在第一个实现的Promise赢得比赛后,所有进一步的结果都将被忽略。这是一个所有Promise都失败的示例:Promise.any([newPromise((resolve,reject)=>setTimeout(()=>reject(newError("Ouch!")),1000)),newPromise((resolve,reject)=>setTimeout(()=>reject(newError("Error!")),2000))]).catch(error=>{console.log(error.constructor.name);//AggregateError控制台.log(error.errors[0]);//错误:哎哟!console.log(error.errors[1]);//错误:错误!});正如我们所见,失败的Promise对象的错误在AggregateError对象的errors属性中可用。