Promise用法

最新推荐文章于 2024-03-06 17:18:37 发布

华科易迅

最新推荐文章于 2024-03-06 17:18:37 发布

阅读量258

点赞数

分类专栏： NodeJS

本文链接：https://blog.csdn.net/qixiang_chen/article/details/104450368

版权

NodeJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Promise 是抽象的异步处理对象，Promise最初被提出是在 E语言中，它是基于并列/并行处理设计的一种编程语言。Javascript 在 ES6 之后也开始支持 Promise 特性。

Javascript可以通过回调处理异步问题，但处理起来比较麻烦，尤其存在嵌套调用问题。

Promise对象有三个状态
Pending：待处理
Fulfilled：已成功处理
Rejected：处理失败

新创建的Promise对象是Pending状态，执行异步操作过程中一直处在Pending状态，当异步操作成功完成Promise对象状态改为Fulfilled,当异步操作失败时Promise对象状态改为Rejected。

创建Promise需要初始化两个参数函数的其中一个或全部，这个函数分别是resolve和reject,
当异步操作成功完成Promise对象状态改为Fulfilled，执行resolve。
当异步操作失败时Promise对象状态改为Rejected，执行reject。

定义Promise的方法

一、 let p = new Promise((resolve,reject)=>{
resolve(‘成功执行’);

	})
	p.then((value)=>{console.log('resolve='+value)});

	下面写法也可以
	let p2 = new Promise(function(ok,err){
		err('执行失败')
		
	})
	p2.catch((value)=>{console.log('reject='+value)});

<html>
	<title>Test Promise</title>
	<head>
	</head>
	<body>
		<script>
		let p = new Promise((resolve,reject)=>{
			resolve('成功执行');
			
		})
		p.then((value)=>{console.log('resolve='+value)});

		let p2 = new Promise(function(ok,err){
			err('执行失败')
			
		})
		p2.catch((value)=>{console.log('reject='+value)});

		</script>

		<div id="testdiv"></div>
	</body>
</html>

二、使用静态方法resolve或reject
let p = Promise.resolve(‘OK’)
p.then((value)=>{console.log(‘resolve=’+value)});

	let p2 = Promise.reject('执行失败')
	p2.catch((value)=>{console.log('reject='+value)});

<html>
	<title>Test Promise</title>
	<head>
	</head>
	<body>
		<script>
		let p = Promise.resolve('OK')
		p.then((value)=>{console.log('resolve='+value)});

		let p2 = Promise.reject('执行失败')
		p2.catch((value)=>{console.log('reject='+value)});

		</script>

		<div id="testdiv"></div>
	</body>
</html>

Promise执行顺序

<html>
	<title>Test Promise</title>
	<head>
	</head>
	<body>
		<script>
		let p = new Promise((resolve,reject)=>
		{
			console.log('run here 1');
			resolve('run here 2');
		});
		p.then((v)=>{console.log(v)});
		console.log('run here 3');

		</script>

		<div id="testdiv"></div>
	</body>
</html>

在这里插入图片描述
异步执行操作在最后输出，所以run here 2最后输出

Promise All操作必须全部Promise执行完成

Promise.add([p1,p2,p3])

<html>
	<title>Test Promise</title>
	<head>
	</head>
	<body>
		<script>
		let p1 = new Promise((resolve,reject)=>
		{
			resolve('run promise 1');
		});
		let p2 = new Promise((resolve,reject)=>
		{
			resolve('run promise 2');
		});
		let p3 = new Promise((resolve,reject)=>
		{
			resolve('run promise 3');
		});

		let p4 = Promise.all([p1,p2,p3]);
		p4.then((v)=>{console.log(v)});

		</script>

		<div id="testdiv"></div>
	</body>
</html>

在这里插入图片描述

Promise Race操作只有一个Promise执行完成即可

Promise.race([p1,p2,p3])

<html>
	<title>Test Promise</title>
	<head>
	</head>
	<body>
		<script>
		let p1 = new Promise((resolve,reject)=>
		{
			resolve('run promise 1');
		});
		let p2 = new Promise((resolve,reject)=>
		{
			resolve('run promise 2');
		});
		let p3 = new Promise((resolve,reject)=>
		{
			resolve('run promise 3');
		});

		let p4 = Promise.race([p1,p2,p3]);
		p4.then((v)=>{console.log(v)});

		</script>

		<div id="testdiv"></div>
	</body>
</html>

在这里插入图片描述