async/await实现Promise.all()

🐱个人主页：不叫猫先生
🙋‍♂️作者简介：专注于前端领域各种技术，热衷分享，期待你的关注。
💫系列专栏：vue3从入门到精通
📝个人签名：不破不立

目录

一、Promise.all()简介

Promise.all() 方法接收一个 promise 的 iterable 类型（注：Array，Map，Set 都属于 ES6 的 iterable 类型）的输入，并且只返回一个Promise实例，并且输入的所有 promise 的 resolve 回调的结果是一个数组。

• Promise的 resolve 回调执行是在所有输入的 promise 的 resolve 回调都结束，或者输入的 iterable 里没有 promise 了的时候
• Promise的 reject 回调执行是只要任何一个输入的 promise 的 reject 回调执行或者输入不合法的 promise 就会立即抛出错误，并且只要有 reject 就会立即抛出的错误信息。

二、async/await实现Promise.all()

先定义三个Promise实例对象，并放置于一个数组中

let a = new Promise((res, rej)=> {
            res(1)
        }).catch(err => console.log(err))let b = new Promise((res, rej)=> {
            setTimeout(()=> {
                rej(2)
            },2000)
        }).catch(err => console.log(err))let c = new Promise((res, rej)=> {
            res(3)
        }).catch(err => console.log(err))
       const arr =[a, b, c]

1、方式一

-使用async/await，循环遍历Promise实例对象的数组，并把每个Promise对象的结果放置于一个空数组中。

asyncfunctionbb(){let arr1 =[];try{for(let i =0; i < arr.length; i++){let h =await arr[i]
                    arr1.push(h)}}catch(err){}return arr1
        }bb().then(res=>{
            console.log(res);//[1, undefined, 3]});

undefined

是因为await只处理成功时resolve()，不处理失败异常，故返回

undefined

2、方式二

该方面类似实现手写Promise.acll()，等await拿到Promise结果然后count加1，知道count的数值等于数值的长度在resolve()

constall=(arr)=>{returnnewPromise((resolve, reject)=>{let length = arr && arr.length
                let count =0let result =[]if(!arr || arr.length ===0){resolve(result)}
                arr.forEach(async(item, index)=>{try{const res =await item
                        result[index]= res
                        count++if(count === length ){resolve(result)}}catch(err){reject(err)}});})}

三、async/await与Promise.all()结合使用

因为Promise.all()返回的也是Promise，所以await 后面可以跟Promise.all()

functionfn(){returnnewPromise((resolve, reject)=>{resolve(Math.random())})}asyncfunctionasyncFunc(){let result
            try{
                result =await Promise.all([fn(),fn()])
                console.log(result)}catch(err){
                console.log(err,'err')}return result
        }asyncFunc().then(res=>{ console.log(res,'res')})