js 实现简易版promise

Love The Way You Lie 2023-02-13 05:40 25阅读 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")

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js —— 简易版贪吃蛇

几点注意事项： > ① 当将页面中某个对象存入数组时，对数组进行操作相当于对DOM元素操作。 > ② 移除页面上的某一个元素的两种方法：`1) 父对象.remo...

逃离我推掉我的手/ 2024年04月18日 18:29/ 0 赞/ 94 阅读

相关 js 实现简易版promise

实现一个简易版的promise，并非完全符合Promise / A+ 规范，仅供学习使用 function myPromise(fn){ const th

Love The Way You Lie/ 2023年02月13日 05:40/ 0 赞/ 26 阅读

相关 JS案例：实现Promise

说到ES6的Promise，大家并不陌生，它是JS中解决异步的方法之一其优点：避免回调地狱，链式调用，函数思路清晰，逻辑相对回调函数和事件发布/订阅更强缺点：理解性

淩亂°似流年/ 2022年12月21日 13:54/ 0 赞/ 197 阅读

相关手写promise，实现一个简易的promise

文案没编辑好，先上代码吧 const isFunction = variable => typeof variable === 'function'

港控/mmm°/ 2022年11月30日 12:41/ 0 赞/ 279 阅读

相关 js 自己实现Promise

function Promise(exector) { var _this = this this.status = 'pending'

迷南。/ 2022年10月14日 12:59/ 0 赞/ 184 阅读

相关 Promise超简易实现

有时候就需要一个简单的Promise撑场面，能用就行。 ——真不行的时候咱再使用完整的实现呗。实现的方法 1.new Promise(fn),创建一个新的Prom

冷不防/ 2022年06月10日 01:41/ 0 赞/ 122 阅读

相关 js 实现简易版深拷贝

可以兼容对象和数组类型数据的深拷贝 function copy(ladel){ var obj = { }

柔情只为你懂/ 2022年02月19日 14:25/ 0 赞/ 289 阅读

相关 JS === 实现简易调色板

<!DOCTYPE html> <html> <head> <title></title> <style type="t

淡淡的烟草味﹌/ 2021年12月03日 11:43/ 0 赞/ 260 阅读

相关原生js实现Promise（简版+升级版）

JS 实现 Promise =============== MDN Promise 参考地址： [https://developer.mozilla.org/zh-CN/

偏执的太偏执、/ 2021年10月19日 08:24/ 0 赞/ 335 阅读

相关如何实现简易版jQuery

window.jQuery=x=>{ //声明一个空对象 let jQuery = {};

妖狐艹你老母/ 2021年10月19日 00:44/ 0 赞/ 372 阅读