js 实现简易版promise

最新推荐文章于 2022-06-28 15:09:51 发布

guoqing2016

最新推荐文章于 2022-06-28 15:09:51 发布

阅读量296

点赞数

分类专栏： js 文章标签： javascript promise

本文链接：https://blog.csdn.net/guoqing2016/article/details/106384240

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

实现一个简易版的promise，并非完全符合Promise / A+ 规范，仅供学习使用

function myPromise(fn){
	const that = this;
	that.state = "pending";
	that.vaule = null;
	that.resolveCallBacks = [];
	that.rejectCallBacks = [];
	function resolve(value){
		if(value instanceof myPromise){
			return value.then(resolve,reject);
		}
		setTimeout(()=>{
			if(that.state == "pending"){
				that.state = "resolve";
				that.value = value;
				that.resolveCallBacks.map(cb=>cb(that.value));
			}
		},0)
	}
	function reject(value){
		if(that.state == "pending"){
			that.state = "reject";
			that.value = value;
			that.rejectCallBacks .map(cb=>cb(that.value));
		}
	}
	try{
		fn(resolve,reject)
	}catch(err){
		reject(err)
	}
}
myPromise.prototype.then = function(onFulfilled,onRejected){
	const that = this;
	onFulfilled = typeof onFulfilled == "function"?onFulfilled:v=>v;
	onRejected = typeof onRejected == "function"?onRejected:v=>{throw v};
	if(that.state == "pending"){
		return new myPromise((resolve,reject)=>{
			that.resolveCallBacks.push(()=>{
				try{
					let x = onFulfilled(that.value)
					resolve(x)
				}catch(err){
					reject(err)
				}
			})
			that.rejectCallBacks .push(()=>{
				try{
					let x = onRejected(that.value)
					resolve(x)
				}catch(err){
					reject(err)
				}
			})
		})
	}
	if(that.state == "resolve"){
		return new myPromise((resolve,reject)=>{
			try{
				let x = onFulfilled(that.value)
				resolve(x)
			}catch(err){
				reject(err)
			}
		})
	}
	if(that.state == "reject"){
		return new myPromise((resolve,reject)=>{
			try{
				let x = onRejected(that.value)
				resolve(x)
			}catch(err){
				reject(err)
			}
		})
	}
}
//测试
new myPromise((resolve,reject)=>{
	console.log("myPromise")
	setTimeout(()=>{
		console.log("myPromise resolve")
		resolve(10)
	},1000)
}).then(res=>{
	console.log("myPromise then:",res)
	return 100
}).then(res=>{
	console.log("myPromise then:",res)
})
console.log("test")

下面是更简易的版本，无then的链式调用的

function myPromise(fn){
	const that = this;
	that.state = "pending";
	that.vaule = null;
	that.resolveCallBacks = [];
	that.rejectCallBacks = [];
	function resolve(value){
		setTimeout(()=>{
			if(that.state == "pending"){
				that.state = "resolve";
				that.value = value;
				that.resolveCallBacks.map(cb=>cb(that.value));
			}
		},0)
	}
	function reject(value){
		if(that.state == "pending"){
			that.state = "reject";
			that.value = value;
			that.rejectCallBacks .map(cb=>cb(that.value));
		}
	}
	try{
		fn(resolve,reject)
	}catch(err){
		reject(err)
	}
}
myPromise.prototype.then = function(onFulfilled,onRejected){
	const that = this;
	onFulfilled = typeof onFulfilled == "function"?onFulfilled:v=>v;
	onRejected = typeof onRejected == "function"?onRejected:v=>{throw v};
	if(that.state == "pending"){
		that.resolveCallBacks.push(onFulfilled)
		that.rejectCallBacks .push(onRejected)
	}
	if(that.state == "resolve"){
		onFulfilled(that.value)
	}
	if(that.state == "reject"){
		onRejected(that.value)
	}
}
//测试
new myPromise((resolve,reject)=>{
	console.log("myPromise")
	setTimeout(()=>{
		console.log("myPromise resolve")
		resolve(10)
	},1000)
}).then(res=>{
	console.log("myPromise then:",res)
})
console.log("test")