vue promise.all使用

Posted 2023-04-27

参考技术A 一个页面可能有多个并发请求，我们想在所有请求完成后做处理， promise.all 很好解决这个问题。

async/await实现Promise.all()

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

目录

• • 一、Promise.all()简介
  • 二、async/await实现Promise.all()
  • • 1、方式一
    • 2、方式二
  • 三、async/await与Promise.all()结合使用

一、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对象的结果放置于一个空数组中。

		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

2、方式二

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

      const all = (arr) => 
  			return new Promise((resolve, reject) => 
				let length = arr && arr.length
				let count = 0
				let 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()

         function fn() 
			return new Promise((resolve, reject) => 
				resolve(Math.random())
			)
		
		async function asyncFunc() 
			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') )