promise 的实现原理

最新推荐文章于 2023-12-14 14:51:09 发布
最新推荐文章于 2023-12-14 14:51:09 发布
阅读量148 收藏
点赞数
分类专栏： js 基础算法 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CrazyNatural/article/details/126799777
版权
promise 的实现原理
class Pro {
	constructor(a) {
		this.code = "padding"
		this.value = null
		this.error = null
		let res = (value) => {

			if (this.code == "padding") {
				setTimeout(() => { //宏函数 让他再最后执行
					console.log("res被调用", this.code)
					this.value = value
					this.code = "fulfilled"
					this.onfulfilled(this.value)
				}, 0)
			}

		}
		let err = (error) => {

			if (this.code == "padding") {
				setTimeout(() => {
					console.log("err被调用", this.code)
					this.error = error
					this.code = "fulfilled"
				}, 0)
			}
		}
		a(res, err)
	}
	onthen(onfulfilled, onrejected) {
		this.onfulfilled = onfulfilled
		this.onrejected = onrejected

	}
}
let m = new Pro((a, b) => {
	a([1,2,3,4])
})
m.onthen(val=>{console.log(val,"...")},error=>{
	console.log(error)
})

但是规范制作不希望使用宏任务，应该使用微任务 queueMicrotask

class Pro {
	constructor(a) {
		this.code = "padding"
		this.value = null
		this.error = null
		let res = (value) => {

			if (this.code == "padding") {
				this.code = "fulfilled"
				queueMicrotask(() => {
					console.log("res被调用", this.code)
					this.value = value
					this.onfulfilled(this.value)
				})
			}

		}
		let err = (error) => {

			if (this.code == "padding") {
				this.code = "fulfilled"
				queueMicrotask(() => {
					console.log("err被调用", this.code)
					this.error = error
					this.onrejected(this.error)
				})
			}
		}
		a(res, err)
	}
	onthen(onfulfilled, onrejected) {
		this.onfulfilled = onfulfilled
		this.onrejected = onrejected

	}
}
let m = new Pro((a, b) => {
	setTimeout(()=>{
		a([1,2,3,4])
	},1000)
	
})
m.onthen(val=>{console.log(val,"...")},error=>{
	console.log(error)
})

优化1 支持then的多次调用

class Pro {
	constructor(a) {
		this.code = "padding"
		this.value = null
		this.error = null
		this.oklist=[]
		this.errlist=[]
		let res = (value) => {
			if (this.code == "padding") {
				queueMicrotask(() => {
					this.code = "fulfilled"
					console.log("res被调用", this.code)
					this.value = value
					this.oklist.forEach(val=>{
						val(this.value)  //微任务执行的then
					})
				})
			}
		}
		let err = (error) => {
			if (this.code == "padding") {
				queueMicrotask(() => {
					this.code = "fulfilled"
					console.log("err被调用", this.code)
					this.error = error
					this.errlist.forEach(val=>{
						val(this.value)
					})
				})
			}
		}
		a(res, err)
	}
	onthen(onfulfilled, onrejected) {
		this.oklist.push(onfulfilled)
		if(this.code=="fulfilled"){ //支持settimeout的异步调用then的操作
			onfulfilled(this.value)
		}
		this.errlist.push(onrejected)
		if(this.code=="fulfilled"){ //支持settimeout的异步调用then的操作
			onrejected(this.value)
		}
	}
}

let m = new Pro((a, b) => {
	
		a([1,2,3,4])
	
		
	
	
})
m.onthen(val=>{console.log(val,"...")},error=>{
	console.log(error)
})
m.onthen(val=>{console.log(val,".11..")},error=>{
	console.log(error)
})
setTimeout(()=>{
	m.onthen(val=>console.log(val,"22"),error=>{
	console.log(error)
})
	console.log(1)
},1000)

问题：失败和成功会同时执行 优化then的链式结构

class PromiseA {
	constructor(x) {
		this.code = "dengdai"
		this.val = null
		this.err = null
		this.valf = []
		this.errf = []
		let a = (val) => {
			queueMicrotask(
				() => {
					this.code = "going"
					this.val = val
					this.valf.forEach(val => val())
				})
		}
		let b = (err) => {
			queueMicrotask(
				() => {
					this.code = "going"
					this.err = err
					this.errf.forEach(err => err())
				})
		}
		try {
			x(a, b)
		} catch (e) {
			//TODO handle the exception
			b(e)
		}

	}
	then(val, err) {
		return new PromiseA((a, b) => {
				if (this.code == "dengdai") {

					this.valf.push(() => {
						try {
							let vals = val(this.val)
							a(vals)
						} catch (e) {
							//TODO handle the exception
							err(e)
						}
					})

					this.errf.push(() => {
						try {
							a(err(this.err))
						} catch (e) {
							err(e)
						}
					})
				
			} else if (this.code == "going") {
				if (this.val != null) {
					try {
						let e = this.val
						a(val(e))
					} catch (e) {
						//TODO handle the exception
						err(e)
					}

				} else {
					try {
						let e = this.err
						a(err(e))
					} catch (e) {
						//TODO handle the exception
						err(e)
					}

				}

			}


		})
}
}
catch
class PromiseA {
	constructor(x) {
		this.code = "dengdai"
		this.val = null
		this.err = null
		this.valf = []
		this.errf = []
		let a = (val) => {
			queueMicrotask(
				() => {
					this.code = "going"
					this.val = val
					this.valf.forEach(val => val())
				})
		}
		let b = (err) => {
			queueMicrotask(
				() => {
					this.code = "going"
					this.err = err
					this.errf.forEach(err => err())
				})
		}
		try {
			x(a, b)
		} catch (e) {
			//TODO handle the exception
			b(e)
		}

	}
	then(val, err) {
		err=err||(err=>{throw err})
		return new PromiseA((a, b) => {
				if (this.code == "dengdai") {
					if(val!=null){
						this.valf.push(() => {
							try {
								let vals = val(this.val)
								a(vals)
							} catch (e) {
								//TODO handle the exception
								b(e)
							}
						})
					}
					if(err!=null){
						this.errf.push(() => {
							try {
								let k = this.err								
								a(err(k))	
							} catch (e) {
								b(e)
							}
						})
					}
			} else if (this.code == "going") {
				if (this.val != null) {
					try {
						let e = this.val
						a(val(e))
					} catch (e) {
						//TODO handle the exception
						b(e)
					}

				} else {
					try {
						let e = this.err
						a(err(e))
					} catch (e) {
						//TODO handle the exception
						b(e)
					}

				}

			}


		})
}
catch(b){
	this.then(undefined,b)
}
}

//添加finally方法

class PromiseA {
	constructor(x) {
		this.code = "dengdai"
		this.val = null
		this.err = null
		this.valf = []
		this.errf = []
		let a = (val) => {
			queueMicrotask(
				() => {
					this.code = "going"
					this.val = val
					this.valf.forEach(val => val())
				})
		}
		let b = (err) => {
			queueMicrotask(
				() => {
					this.code = "going"
					this.err = err
					this.errf.forEach(err => err())
				})
		}
		try {
			x(a, b)
		} catch (e) {
			//TODO handle the exception
			b(e)
		}

	}
	then(val, err) {
		err=err||(err=>{throw err}) //让其为undefined时拿到值
		val=val||(val=>val)//让其为undefined时拿到值
		return new PromiseA((a, b) => {
				if (this.code == "dengdai") {
					if(val!=null){
						this.valf.push(() => {
							try {
								let vals = val(this.val)
								a(vals)
							} catch (e) {
								//TODO handle the exception
								b(e)
							}
						})
					}
					if(err!=null){
						this.errf.push(() => {
							try {
								let k = this.err								
								a(err(k))	
							} catch (e) {
								b(e)
							}
						})
					}
			} else if (this.code == "going") {
				if (this.val != null) {
					try {
						let e = this.val
						a(val(e))
					} catch (e) {
						//TODO handle the exception
						b(e)
					}

				} else {
					try {
						let e = this.err
						a(err(e))
					} catch (e) {
						//TODO handle the exception
						b(e)
					}

				}

			}


		})
}
catch(b){
	return this.then(undefined,b)
}
finally(or){
	return this.then(()=>{
		or()
	},()=>{
		or()
	})
}
}
let m = new PromiseA((res, err) => {
	res(1123)
})
m.then(val=>val+"123").then(val=>{console.log(val);return val+"bbb"}).catch(val=>console.log("err",val)).then(()=>{
	console.log("结束")
})

resolve/reject 创建一个普通promise 和 错误的promise

class PromiseA {
	constructor(x) {
		this.code = "dengdai"
		this.val = null
		this.err = null
		this.valf = []
		this.errf = []
		let a = (val) => {
			queueMicrotask(
				() => {
					this.code = "going"
					this.val = val
					this.valf.forEach(val => val())
				})
		}
		let b = (err) => {
			queueMicrotask(
				() => {
					this.code = "going"
					this.err = err
					this.errf.forEach(err => err())
				})
		}
		try {
			x(a, b)
		} catch (e) {
			//TODO handle the exception
			b(e)
		}

	}
	then(val, err) {
		err=err||(err=>{throw err})
		val=val||(val=>val)
		return new PromiseA((a, b) => {
				if (this.code == "dengdai") {
					if(val!=null){
						this.valf.push(() => {
							try {
								let vals = val(this.val)
								a(vals)
							} catch (e) {
								//TODO handle the exception
								b(e)
							}
						})
					}
					if(err!=null){
						this.errf.push(() => {
							try {
								let k = this.err								
								a(err(k))	
							} catch (e) {
								b(e)
							}
						})
					}
			} else if (this.code == "going") {
				if (this.val != null) {
					try {
						let e = this.val
						a(val(e))
					} catch (e) {
						//TODO handle the exception
						b(e)
					}

				} else {
					try {
						let e = this.err
						a(err(e))
					} catch (e) {
						//TODO handle the exception
						b(e)
					}

				}

			}


		})
}
catch(b){
	return this.then(undefined,b)
}
finally(or){
	return this.then(()=>{
		or()
	},()=>{
		or()
	})
}
static resolve(obj){
	return new PromiseA((a,b)=>{
		a(obj)
	})
}

static reject(str){
	return new PromiseA((a,b)=>{
		throw str
	})
}

}
all，allSettled
class PromiseA {
	constructor(x) {
		this.code = "dengdai"
		this.val = null
		this.err = null
		this.valf = []
		this.errf = []
		let a = (val) => {
			queueMicrotask(
				() => {
					this.code = "going"
					this.val = val
					this.valf.forEach(val => val())
				})
		}
		let b = (err) => {
			queueMicrotask(
				() => {
					this.code = "going"
					this.err = err
					this.errf.forEach(err => err())
				})
		}
		try {
			x(a, b)
		} catch (e) {
			//TODO handle the exception
			b(e)
		}

	}
	then(val, err) {
		err=err||(err=>{throw err})
		val=val||(val=>val)
		return new PromiseA((a, b) => {
				if (this.code == "dengdai") {
					if(val!=null){
						this.valf.push(() => {
							try {
								let vals = val(this.val)
								a(vals)
							} catch (e) {
								//TODO handle the exception
								b(e)
							}
						})
					}
					if(err!=null){
						this.errf.push(() => {
							try {
								let k = this.err								
								a(err(k))	
							} catch (e) {
								b(e)
							}
						})
					}
			} else if (this.code == "going") {
				if (this.val != null) {
					try {
						let e = this.val
						a(val(e))
					} catch (e) {
						//TODO handle the exception
						b(e)
					}

				} else {
					try {
						let e = this.err
						a(err(e))
					} catch (e) {
						//TODO handle the exception
						b(e)
					}

				}

			}


		})
}
catch(b){
	return this.then(undefined,b)
}
finally(or){
	return this.then(()=>{
		or()
	},()=>{
		or()
	})
}
static resolve(obj){
	return new PromiseA((a,b)=>{
		a(obj)
	})
}

static reject(str){
	return new PromiseA((a,b)=>{
		throw str
	})
}
static all(list){
	return new PromiseA((a,b)=>{
		let lists =[]
		list.forEach(val=>val.then(val=>{
			lists.push(val)
			if(lists.length==list.length){
				a(lists)
			}
		},err=>{
			b(err)
		}))
	})
}

static allSettled(list){
	return new PromiseA((a,b)=>{
		let lists = []
		list.forEach(val=>{
			val.then(vals=>{
				lists.push("code: 200 value:"+vals)
				if(list.length==lists.length){
					a(lists)
				}
			},err=>{
				lists.push("code: 400 value:"+err)
				if(list.length==lists.length){
					a(lists)
				}
			})
			
		})	
	})
}


}
let m = new PromiseA((res, err) => {
	setTimeout(()=>{
		res(11234)
	},1000)
	
})
let m1 = new PromiseA((res, err) => {
	setTimeout(()=>{
		res(1123)
	},2000)
})
let m2 = new PromiseA((res, err) => {
	throw "errpss"
})
// m.then(val=>val+"123").then(val=>{console.log(val);return val+"bbb"}).catch(val=>console.log("err",val)).then(()=>{
// 	console.log("结束")
// })

// let k = PromiseA.reject("hellow word").then(val=>console.log(val),err=>console.log())
let k = PromiseA.allSettled([m,m2,m1]).then(val=>console.log(val))
竞速 race
static race(list){
	return new PromiseA((a,b)=>{
		list.forEach(val=>{
			val.then(val=>{
				a(val)
			},err=>{
				b(err)
			})
		})
	})
}
any方法
static any(list) {
		return new PromiseA((a, b) => {
			let lists = []
			let sb = []
			list.forEach(val => {
					val.then(val => {
							if (lists.length == 0) {
								a(val)
								lists.push(1)
							}
						}, err => {
							sb.push(err)
							if (sb.length == list.length) {
								b(new AggregateError(sb))
							}
						})
					})
			})
	}

let k = PromiseA.any([m2, m2, m2]).then(val => console.log(val), err => console.log(err.errors))

调用

自信小老头
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
promise实现原理
11-13
手写 Promise 实现原理
promise简单实现
huangzhixin1996的博客
09-11 94
关于手写一个简单的promise
Promise 实现原理
热门推荐
weixin_43299180的博客
02-21 2万+
文章目录一、Promise 介绍二、promise 源码实现 一、Promise 介绍 定义 Promise 是异步编程的一种解决方法，比传统的回调函数和事件更合理；它是由社区提出和实现经由 ES6 将其写进语言标准，并在原生提供了 Promise 对象； Promise 可以理解是一个容器，里面保存着某个将来才会结束的事件（异步操作）的结果；从语法上说，Promise 是一个对象通过它可以获取异步操作的消息；Promise 提供了统一的 API ，各种异步操作都可以用同样的方法进行处理。 特点 Pr
Promise实现原理
最新发布
NM86876788的博客
12-14 165
Promise 实现原理
面试问 Promise 不会？超级详细的手写Promise原理，带你一步一步写出一个自己的 Promise
秋天，黄叶坠地，凉风有信。
03-12 1614
文章目录Promise 原理 及其 实现一、实现resolve和reject1、resolve与reject2. 状态不可变3. throw二、实现 then1. 实现then2. 定时器情况3. 链式调用4. 微任务三、最后总结 Promise 原理 及其 实现 首先要实现 Promise 就要让我们了解它具体功能 let p1 = new Promise((resolve)=>{ resolve(2) }) console.log(p1); let p2 = new Promise((
Javascript-Promise原理
03-06
Promise对象必须实现then方法，then是promise规范的核心，而且then方法也必须返回一个Promise对象，同一个Promise对象可以注册多个then方法，并且回调的执行顺序跟它们的注册顺序一致； then方法接受两个回调函数，...
Promise Async+await实现原理及案例分析
04-03
Promise Async+await实现原理及案例分析
JavaScript Promise 原理
05-15
Promise 原理，包括then、catch、all、race、reject、finally、resolve方法。200行代码实现自己的Promise
Promise原理介绍和实现.docx
05-06
下面是一个简化的Promise实现： ```javascript class MyPromise { constructor(executor) { this.status = "pending"; this.resolvedValue = undefined; this.rejectedReason = undefined; this....
Promise原理详解及实现方式
19年的墨先生的博客
09-11 8321
在异步编程中，许多操作都会放在回调函数（callback）中，有时候需要拿到上一个异步操作的返回值再做第二次请求 比如： asyncOperation(data => { // 处理 `data` anotherAsync(data2 => { // 处理 `data2` yetAnotherAsync(() => { // 完成 }) }) }) 上面代码中，每增加一个异步请求，就会多添加一层回调函数的嵌套，过多的回调
Promise原理及实现
橘猫吃不胖的博客
08-09 2267
Promise原理及实现 1 Promise核心逻辑实现 2 加入异步逻辑 3 then方法添加多次调用逻辑 4 链式调用then方法 5 Promise错误捕获 6 then方法参数设置为可选 7 实现Promise.all 8 实现Promise.resolve 9 实现Promise.race 10 实现finally方法 11 实现catch方法 12 全部代码展示...
5K字 由浅入深聊聊Promise实现原理
Web_boom的博客
03-10 320
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
promise实现原理解析
weixin_53156345的博客
05-16 400
Promise是一个类，可以翻译为承诺、期约当通过new创建Promise实例时，需要传入一个回调函数，我们称之为executor这个回调函数会被立刻执行，并传入两个回调参数resolvereject当调用resolve回调函数时，会执行 Promise 对象的then方法传入的回调当调用reject回调函数时，会执行 Promise 对象的catch方法传入的回调Promisepending：待定状态，执行了 executor 后，处于该状态fulfilled：兑现状态，调用resolve()
promise实现原理解析（设计思想）
前端361
08-06 4182
promise作为es6的基本api，大家都用的很熟悉了。不过谈到promise的实现原理，可能很多人还很陌生，这里对promise的内部实现原理做下解析。 研究一种api或一个框架，最好的方法是要知道这背后能够实现的价值和自我提升，不能为了研究而研究。网上有很多博客或者专栏也在介绍，那么我们为什么要研究promise的内部实现原理呢，这对于编程或者业务又有怎样的帮助呢。 研究promise原...
图解 Promise 实现原理（一）—— 基础实现
vivo互联网技术
03-30 452
本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ 作者：孔垂亮 很多同学在学习 Promise 时，知其然却不知其所以然，对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise，并结合流程图、实例以及动画进行演示，达到深刻理解 Promise 用法的目的。 本系列文章有如下几...
promise得实现原理
qq_38935512的博客
02-15 1039
1.Promise本身就是一个构造函数，用来初始化promise实例 2.传入一个执行器，内部注册两个方法resolve,reject，最后通过执行器来执行这两个方法 3.promise 内部有3个状态 等待状态pedding，成功状态resolved,失败状态rejected 4.resolve和reject两个方法就是用来改变status状态得 5.后面封装then方法得时候,就是根据当前得状态来判断执行对应方法，第一个方法固定式成功回调，第二个就是失败回调 function Promise(exe.
解析 Promise 原理，实现一个Promise
weixin_34388207的博客
09-19 475
解析 Promise 原理，实现一个Promise 概述 这篇文章旨在解析 Promise的异步实现原理，并且以 ES6中的 Promise 为蓝本实现一个简单的 Promise。 通过自己动手实现一个 Promise 对象，可以熟悉很多可能不知道的 Promise 细节，同时也能对异步的理解更提升一步。 本文假设读者对 Promise ...
实现一个完美符合Promise/A+规范的Promise
liwusen的博客
04-09 1928
简要介绍：Promise允许我们通过链式调用的方式来解决“回调地狱”的问题，特别是在异步过程中，通过Promise可以保证代码的整洁性和可读性。本文主要解读Promise/A+规范，并在此规范的基础上，自己实现一个Promise. 一、Promise的使用 在了解Promise规范之前，我们知道主流的高版本浏览器已经支持ECMA中的Promise. 创建一个promise实例： var...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

自信小老头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值