专业的编程技术博客社区

网站首页 > 博客文章 正文

JavaScript,ES6,Promise对象,异步编程的一种解决方案,代码

baijin 2024-10-11 10:48:14 博客文章 15 ℃ 0 评论

Promise对象

Promise对象用于表示一个异步操作的最终完成(或失败)及其结果值。一个Promise对象代表一个在这个promise被创建出来时不一定已知的值。

一个Promise必然处于以下几种状态之一:

1、待定(pending):初始状态,既没有被兑现,也没有被拒绝;

2、已兑现(fulfilled):意味着操作成功完成;

3、已拒绝(rejected):意味着操作失败;

之前的内容: JavaScript,ES6,异步编排Promise,async和await关键字

官方地址:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise

代码案例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Promise实例</title>
	</head>
	<body>
		<script type="text/javascript">
			const p1 = new Promise((resolve, reject) => {
				resolve("Success!");
			});
			p1.then((value) => {
				console.log(value);  // Success!
			});
			// 
			var demo1 = new Promise(function(resolve, reject) {
				// 异步处理
				// 处理结束后、调用resolve<正确>或reject<错误>
				console.log("demo1 已处理.");
				resolve({code:"success",message:"正确==>11111"});
			});
			var demo2 = new Promise(function(resolve, reject) {
				// 异步处理
				// 处理结束后、调用resolve<正确>或reject<错误>
				console.log("demo2 已处理.");
				resolve({code:"success",message:"正确==>22222"});
			});
			var demo3 = new Promise(function(resolve, reject) {
				// 异步处理
				// 处理结束后、调用resolve<正确>或reject<错误>
				console.log("demo3 已处理.");
				// reject({code:"success",message:"错误"});
				resolve({code:"success",message:"正确==>33333"});
			});
			Promise.all([demo1, demo2, demo3]).then((result) => {
				console.log("> result", result);
				console.log("> result[0]", result[0]);
				console.log("> result[1]", result[1]);
				console.log("> result[2]", result[2]);
			});
			//创建实例====>promise1
			let promise1 = new Promise((resolve) => {
				setTimeout(() => {
					// 结果传递
					resolve("Promise1操作成功~");
					console.log("Promise1操作成功~")
				}, 3000);
			});
			//创建实例====>promise2
			let promise2 = new Promise((resolve) => {
				setTimeout(() => {
					// 结果传递
					resolve("Promise2操作成功~");
					console.log("Promise2操作成功~")
				}, 1000);
			});
			Promise.all([promise1, promise2]).then((result) => {
				console.log("result.length", result.length);
				console.log("result", result);
			});	
		</script>
	</body>
</html>

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表