如何使 Promise 的结果井井有条

Question

问题： case1 的输出是从 0 到 4，这是有序的，而 case2 的输出是随机的。

我知道case1的结果是有序的原因是请求是在前一个请求的结果来之后才发送的。 在case2中，请求不会等待上一个请求的结果。

我的问题是，有没有办法按顺序保留 case2 的结果？

案例1

const main = async () => {
    const arr = Array.of(...[1,2,3,4,5])

    for (let i=0;i<arr.length;i++) {
        console.log(`request:${i}`)
        const res = await request(i)
        console.log(res)
    }


    console.log("next step")

}

const request = (i:number):Promise<number> => {
    return new Promise<number>(((resolve, reject) => {
        setTimeout(()=>{
            resolve(i)
        },Math.random() * 1000)
    }))
}

输出1

closure
request:0
0
request:1
1
request:2
2
request:3
3
request:4
4
next step

案例2

const main = async () => {
    const arr = Array.of(...[1,2,3,4,5])
    await Promise.all(arr.map(async (v,i) => {
        console.log(`request:${v}`)
        const res = await request(v)
        console.log(`result:${res}`)
        console.log(res)
    })).catch((e) => {

    })


    console.log("next step")

}

const request = (i:number):Promise<number> => {
    return new Promise<number>(((resolve, reject) => {
        setTimeout(()=>{
            resolve(i)
        },Math.random() * 1000)
    }))
}

main()

输出2

request:1
request:2
request:3
request:4
request:5
result:4
4
result:5
5
result:1
1
result:3
3
result:2
2
next step

Answer 1

Promise.all()以相同的顺序返回一个结果数组；他们只是不会按顺序解决。您可以在 request 承诺中返回响应，然后...

const [result1, result2, result3] = await Promise.all([promise1, promise2, promise3]);

或者如果你想遍历一个数组...

const results = await Promise.all([promise1, promise2, promise3]);

Answer 2

Promise All 应该是请求或承诺的数组，在 map() 中应该返回请求。 尝试这个

const main =  () => {
    const arr = Array.of(...[1,2,3,4,5])
     Promise.all(arr.map((v,i) => {
        console.log(`request:${v}`)
         return  request(v)   
    })).then((res)=>{
    res.forEach((val)=>{
        console.log(`result:${val}`)
    })
       
    }).catch((e) => {

    })
    console.log("next step")

}

 const request = (i)=> {
     return new Promise((resolve, reject) => {
        setTimeout(()=>{
            resolve(i)
        }, Math.floor(Math.random() * 10)*1000)
    })
} 

main()