Promise的使用

CoderVic

于 2022-04-01 11:53:09 发布

阅读量123

点赞数

文章标签： es6 javascript

本文链接：https://blog.csdn.net/CoderVic/article/details/123894235

版权

本文介绍了Promise的基本使用，包括异步操作的封装、成功与失败的处理、链式调用以及Promise.all方法的运用。通过示例代码展示了如何在JavaScript中处理异步操作，详细解释了Promise解决回调地狱的问题，帮助读者深入理解Promise的工作原理。

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

Promise的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 什么情况下使用Promise？
			// 一般情况下是有异步操作时，使用Promise对这个异步操作进行封装
			// new ->构造函数（1.保存了一些状态信息 2.执行传入的函数）
			// 在执行传入的回调函数时，会传入两个参数resolve reject,本身又是函数
			new Promise((resolve,reject)=>{
				setTimeout(()=>{
					// 成功是调用resolve
					// resolve("hello world")
					
					// 失败时调用reject
					reject("erro message")
				},1000)
			}).then(data=>{
				console.log(data)
			}).catch(err=>{
				console.log(erro)
			})
		</script>
	</body>
</html>

Promise的另外处理形式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<!-- 	<script>
			new Promise((resolve,reject)=>{
				setTimeout(()=>{
					// resolve("Hello VueJs")
					reject("erro message")
				},1000)
			}).then( data =>{
				console.log(data)
			},erro =>{
				console.log(erro)
			}
			)
		</script> -->
		
		<script>
			new Promise((resolve,reject) => {
				setTimeout(() => {
					// resolve("aaa")
					reject("erro message")
				},1000)
			}).then(data => {
				console.log(data)
			},erro=>{
				console.log(erro)
			})
		</script>
		
	</body>
</html>

Promise的链式调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 第一种方式
			// new Promise((resolve,reject) => {
			// 	setTimeout(() => {
			// 		resolve("Hello Message")
			// 	},1000)
			// }).then((data) => {
			// 	// 1.自己处理
			// 		console.log(data,"第一层代码");
			// 		// 2.对结果进行第一次处理
			// 		return new Promise(resolve => {
			// 			resolve(data + "111")
			// 		}).then((data) => {
			// 			console.log(data,"第二层代码");
			// 			// 3.对结果进行第三次处理
			// 			return new Promise(resolve => {
			// 				resolve(data)
			// 			}).then(data => {
			// 				console.log(data+3333,"第三次代码")
			// 			})
			// 		})
			// 	})
			
		// 第二种简写方式
		new Promise((resolve,reject) => {
			setTimeout(() => {
				resolve("aaaa");
				
			},1000)
		}).then(res => {
			// 1.自己对结果处理
			console.log(res);
			return Promise.resolve(res).then(res => {
				// 2.对结果的第二次处理
				console.log(res+"222");
				return Promise.resolve(res).then(res => {
					// 3.对结果的第三次处理
					console.log(res+"3333")
				})
			})
		}).catch(err => {
			console.log(err)
		})
		
		
		// 第三种简写方式
		// new Promise(resolve => {
		// 	setTimeout(() => {
		// 		resolve("好无聊")
		// 	},1000)
		// }).then(res => {
		// 	console.log(res);
		// 	return res
		// }).then(res => {
		// 	console.log(res+"1111");
		// 	return res
		// }).then(res => {
		// 	console.log(res+"222")
		// })
	
		
		
			
			
		</script>
	</body>
</html>

Promise的all方法的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			Promise.all([
				new Promise((resolve,reject) => {
					setTimeout(() => {
						resolve({name:'Bob',age:20})
					},1000)
				}),
				new Promise((resolve,reject) => {
					setTimeout(() => {
						resolve({name:'Alice',age:22})
					})
				})
			]).then(res => {
				console.log(res)
			})
		</script>
	</body>
</html>