Promise并发请求结果按顺序返回

前言

关于并发请求返回结果如何按照顺序返回，这是开发过程中经常遇见的问题，这里推荐使用Promise的方法进行出来

function timeout (value,time){
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            console.log(value)
             resolve(value)
        },time)
       
    })
}
async function handle(){
    await timeout('123',1000)
     await timeout('333',500)
}
handle()

毫无疑问，上面的代码执行顺序是先打印123 后打印333，但是这就脱离了我们并发的初衷，我们只需要结果按顺序执行，并不需要请求也按照顺序执行，那么就可以改成下面的代码

 Promise.all([timeout('123',1000),timeout('333',500)]).then(res=>{
    console.log(res)
})

我们发现先打印的是333，然后再是123，说明执行的顺序是谁先快谁执行，返回的结果按照也是我们想要的，非常符合并发请求的逻辑

但是Promise.all有一个问题，那就是如果上面有任何一个出现了reject，那么结果就会就会出现问题，看下面案例

function timeout (value,time){
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            console.log(value) 
            if(time > 1000) {
                reject(value)
            }else {

             resolve(value)
            }
            
        },time)
       
    })
}
 Promise.all([timeout('123',1500),timeout('333',900)]).then(res=>{
    console.log(res)
})

上面的Promise.all无法获取结果，直接报错，这是因为Promise.all如果有任意一个reject，整个流程结果就捕获到这个错误，有点类似js中的&&，必须要全部成功才能正确获取，当然也就解决办法，看下面代码

Promise.all([timeout('123',1500).catch(err =>  {return err}),timeout('333',900)]).then(res=>{
    console.log(res)
})

发现打印跟第一个案例一样，是因为如果你的Promise有catch的话，那么Promise.all在遇到reject的时候获取的就是catch里面的值，我这里因为catch返回的就是我传入的值，所以结果跟第一个案例一样

但是如果开发有突然想知道这个数组每一项的状态到底是完成呢还是失败返回的结果呢，那么这个时候需要使用Promise的另一个方法，看下面案例

 Promise.allSettled([timeout('123',1500),timeout('333',900)]).then(res=>{
    console.log(res)
})

发现打印的结果中有每个promise的状态，返回结果也是按照传入的顺序返回的，且reject不需要使用catch

总结

以上就是Promise对于异步任务的一些处理方式，如果有更好的方法欢迎大家提出。