🐱个人主页:不叫猫先生
🙋♂️作者简介:专注于前端领域各种技术,热衷分享,期待你的关注。
💫系列专栏:vue3从入门到精通
📝个人签名:不破不立
Promise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且只返回一个Promise实例,并且输入的所有 promise 的 resolve 回调的结果是一个数组。
先定义三个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]
-使用async/await,循环遍历Promise实例对象的数组,并把每个Promise对象的结果放置于一个空数组中。
async function bb() {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
该方面类似实现手写Promise.acll(),等await拿到Promise结果然后count加1,知道count的数值等于数值的长度在resolve()
const all = (arr) => {return new Promise((resolve, reject) => {let length = arr && arr.lengthlet count = 0let result = []if (!arr || arr.length === 0) {resolve(result)}arr.forEach(async (item, index) => {try {const res = await itemresult[index] = rescount++if (count === length ) {resolve(result)}} catch (err) {reject(err)}});})}
因为Promise.all()返回的也是Promise,所以await 后面可以跟Promise.all()
function fn() {return new Promise((resolve, reject) => {resolve(Math.random())})}async function asyncFunc() {let resulttry {result = await Promise.all([fn(), fn()])console.log(result)} catch (err) {console.log(err, 'err')}return result}asyncFunc().then(res => { console.log(res, 'res') })
下一篇:CSDN竞赛11期题解