async、await及Promise.all()、Promise.race()

Guo zy

已于 2023-05-30 16:18:04 修改

阅读量360

点赞数

分类专栏： Vue 文章标签：前端 javascript vue.js

于 2023-01-15 22:04:08 首次发布

本文链接：https://blog.csdn.net/Alone_Endeavor/article/details/128698321

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章介绍了Promise作为更佳的异步编程解决方案，以及与async/await配合使用时如何简化代码，使其看起来更像同步执行。通过示例展示了await在捕获Promise结果时的处理，以及Promise.all()在处理多个Promise时的特点，即任何一个失败则整体失败。

摘要由CSDN通过智能技术生成

Promise:

Promise提供了一种新的更优雅的异步编程方式，结合async/await，可以将Promise的链式调用变为类似同步代码的形式。

            function 接口1(){
				return new Promise((resolve, reject) => {
					console.log(1)
					setTimeout(()=>{
						resolve("成功 接口1")
					},1000)
					
					// reject("失败")
				});
			}
			function 接口2(){
				return new Promise((resolve, reject) => {
					console.log(2)
					setTimeout(()=>{
						resolve("成功 接口2")
					},2000)
					// reject("失败")
				});
			}
			function 接口3(){
				return new Promise((resolve, reject) => {
					console.log(3)
					setTimeout(()=>{
						resolve("成功 接口3")
					},500)
					// reject("失败")
				});
			}

async、await的使用：

async function  testAsyncAwait(){
				// let result = null;
				// 接口1().then(res=>{
				// 	// result = res
				// 	接口2().then((re)=>{
				// 		接口3().then((r)=>{
				// 			console.log(r)
				// 		})
				// 	})
				// 	console.log(result,29)
				// }).catch(err=>{
				// 	console.log(err)
				// 	result = err
				// });
				// p2(result)
				// //  很多时候  我们需要 得到接口返回的数据 然后拿着接口的返回数据 去调用其他的方法做二次处理 
				let jiekou1 =  await 接口1()
				
				let jiekou2 =  await 接口2()
				
				let jiekou3 =  await 接口3()
				
				let jiekou1 =  await 接口1()
				
				let jiekou2 =  await 接口2()
				
				let jiekou3 =  await 接口3()
				// console.log(jiekou1,55)
				// console.log(jiekou2,55)
				// console.log(jiekou3,55)
				// p2()
				//  总结  await 接收的 结果 如果是 promise的失败接口 那么await下面的代码 会不执行  因为 await 需要接收到的promise结果 是成功 
				
				
				// let arr = [接口1(),接口2(),接口3()]
				// 高仿PromiseAll(arr).then((res)=>{
				// 	console.log(res)//["失败"，"失败"，"失败"]
				// }).catch((err)=>{
				// 	console.log(err)
				// })
				// Promise.all(arr).then((res)=>{
				// 	console.log(res)//["失败"，"失败"，"失败"]
				// }).catch((err)=>{
				// 	console.log(err)
				// })
				// 面试中 经常问 说 我有3个接口  然后  我想用promise.all 但是 我不管他是成功 还是失败 我都要得到一个结果数组 
				// Promise.race(arr).then((res)=>{
				// 	console.log(res,87)
				// })
			}

总结：

await 接收的结果如果是 promise的失败接口那么await下面的代码会不执行因为 await 需要接收到的promise结果是成功

Promise.all()的使用：

async function  testAsyncAwait(){
				// let result = null;
				// 接口1().then(res=>{
				// 	// result = res
				// 	接口2().then((re)=>{
				// 		接口3().then((r)=>{
				// 			console.log(r)
				// 		})
				// 	})
				// 	console.log(result,29)
				// }).catch(err=>{
				// 	console.log(err)
				// 	result = err
				// });
				// p2(result)
				// //  很多时候  我们需要 得到接口返回的数据 然后拿着接口的返回数据 去调用其他的方法做二次处理 
				// let jiekou1 =  await 接口1()
				
				// let jiekou2 =  await 接口2()
				
				// let jiekou3 =  await 接口3()
				
				// let jiekou1 =  await 接口1()
				
				// let jiekou2 =  await 接口2()
				
				// let jiekou3 =  await 接口3()
				// console.log(jiekou1,55)
				// console.log(jiekou2,55)
				// console.log(jiekou3,55)
				// p2()
				//  总结  await 接收的 结果 如果是 promise的失败接口 那么await下面的代码 会不执行  因为 await 需要接收到的promise结果 是成功 
				
				
				let arr = [接口1(),接口2(),接口3()]
				// 高仿PromiseAll(arr).then((res)=>{
				// 	console.log(res)//["失败"，"失败"，"失败"]
				// }).catch((err)=>{
				// 	console.log(err)
				// })
				Promise.all(arr).then((res)=>{
					console.log(res)//["失败"，"失败"，"失败"]
				}).catch((err)=>{
					console.log(err)
				})
				// 面试中 经常问 说 我有3个接口  然后  我想用promise.all 但是 我不管他是成功 还是失败 我都要得到一个结果数组 
				// Promise.race(arr).then((res)=>{
				// 	console.log(res,87)
				// })
			}

总结：

promise all 他接收的是一个 promise的数组然后一旦数组中出现一个失败那么都为失败