如何理解promise 续二

layman0528

已于 2025-04-28 20:56:59 修改

阅读量685

点赞数 18

分类专栏： #node 实战 node 学习笔记 # ECMAScript 文章标签： javascript 开发语言 ecmascript

于 2025-04-28 17:02:33 首次发布

本文链接：https://blog.csdn.net/weixin_46282323/article/details/147587244

版权

node 学习笔记同时被 3 个专栏收录

15 篇文章

订阅专栏

ECMAScript

12 篇文章

订阅专栏

#node 实战

11 篇文章

订阅专栏

尝试自定义promise搭建

Promise.resolve 封装

先来看一下，本身Promise 中的resolve 方法的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		let p =Promise.resolve()
		console.log(p)
	</script>
</html>

在这里插入图片描述
那么在自定义的promise.js 中要怎么写？

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/promise.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>

	</body>
	<script type="text/javascript">
		let p =Promise.resolve(new Promise((resolve,reject)=>{
			reject('111')
		}))
		console.log(p)
	</script>
</html>

//添加resolve 方法
Promise.resolve =function(value){
	return new Promise((resolve,reject)=>{
		if(value instanceof Promise){
			value.then(v=>{
				resolve(v)
			},r=>{
				reject(r)
			})
		}else{
			resolve(value)
		}
	})
}

Promise.reject 封装


//添加resolve 方法
Promise.reject =function(value){
	try {
		return new Promise((resolve,reject)=>{
			reject(value)
		})
	} catch (error) {
		//TODO handle the exception
		reject(error)
	}
	
}

Promise.all 封装

先来看一下，本身Promise 中的all 方法的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <script src="../js/promise.js" type="text/javascript" charset="utf-8"></script> -->
	</head>
	<body>

	</body>
	<script type="text/javascript">
		let p1= new Promise((resolve,reject)=>{
			resolve('11')
		});
		let p2= Promise.resolve(233);
		let p3= Promise.resolve(23);
		
		let result = Promise.all([p1,p2,p3])
		
		console.log(result)
	</script>
</html>

在这里插入图片描述
自定义的方法

Promise.all =function(promises){
	return new Promise((resolve,reject)=>{
		//声明变量，来计算成功的数量
		let count =0;
		//成功结果的数组
		let arr=[];
		for (let index =0; index < promises.length; index++) {
			var promise = promises[index];
			promise.then(v=>{
				count++;
				//将当前promise对象成功的结果存储到数组中
				arr[index]=v;
				if(count === promises.length){
					resolve(arr)
				}
			},r=>{
				reject(r)
			})
		}
		
		
	})
	
}

Promise.race 封装

Promise.race = function(promises){
	return new Promise((resolve,reject)=>{
		for (let i = 0; i < promises.length; i++) {
			 promises[i].then(v=>{
				 resolve(v)
			 },r=>{
				 reject(r)
			 })
			
		}
	})
	
}

封装成class

class Promise {
	//构造方法
	constructor(exectuor) {
		
	}


	then(onResolved, onRejected) {
		
	}

	catch(onRejected){
		
	}
	
	static resolve(value){
		
	}
	
	static reject(value) {
		
	}
	
	static all (promises) {
		
	}
	
	
	static race (promises) {
	
	}
}

async 与await

async 函数

函数都返回值为promise对象
promise对象的结果由async函数执行的返回值决定
如果返回值是一个非Promise类型的数据，则Promise的状态是fulfilled
如果返回值是一个Promise的对象，则返回状态由这个Promise的状态决定
如果throw 异常，则返回状态就是rejected

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		async function test(){
			
		}
		let result =test();
		console.log(result)
	</script>
</html>

在这里插入图片描述

await表达式

await右侧的表达式一般为promise对象，但也可以是其他的值
如果表达式是promise对象，await返回的是promise成功的值
如果表达式是其他值，直接将此值作为await的返回值

注：
await 必须写在async函数中，但async函数中可以没有await
如果await的promise失败了，就会抛出异常，需要通过try…catch捕获异常

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		async function test(){
			let p =new Promise((resolve,reject)=>{
				resolve('ok')
			})
			let res = await p;
			
			console.log(res)
		}
		test();
	</script>
</html>