一个精简的promise实现 微任务API

  用谷歌的微任务API queueMicrotask写了一个promise 因为queueMicrotask兼容性不好,现在只能在谷歌浏览器下可以使用,所以其实 写这个promise只是为了学习 一下promise 实现过程。可以实现promise的基础功能 添加函数到微任务队列,能链式调用,不过并不能实现继发=_=,还有待实现。

function myPromise(fn){
	let status = "pending"
	this.tasks = []
	this.next
	this.parent = null
	this.child
	let resolve = (val)=>{
		this._status = "resolved"
	}
	Object.defineProperty(this,'_status',{
		get:() => {
			return status
		},
		set:(newValue) => {
            status = newValue;
			this.parent && (this.parent._status = "resolved")
			queueMicrotask(()=>{
                this.tasks.forEach(task => {
					let result =  task()
                    if(result instanceof myPromise){
						this.child = result
						this.child.parent = this.next
					}
                })
            })
        },
		enumerable : true,
  		configurable : true
	})
	fn.call(this,resolve)
}

myPromise.prototype.then = function (task) {
	this.tasks.push(task)
	let p = new myPromise(()=>{})
	this.next = p 
	return p
}

// function myPromise(fn){
// 	this.state='PENDING';
// 	this.doneList=[];
// 	this.pendingList=[];//处于pending状态的promise待 resolve
// 	this.PromiseValue;
// 	Object.defineProperty(this,'_state',{
// 		set:function(val){
// 			if(val!="PENDING"){
// 				this.state=val;
// 				let done,fail;
// 				if(this.doneList.length){
// 					done=this.doneList.shift().bind(this,this.PromiseValue)
// 				}
// 				if(done){
// 					this.then(done);
// 				}
// 			}
// 		},
// 		get:function(){
// 			return this.state;
// 		},
// 		enumerable: false,
//   		configurable: false,
// 	})
// 	fn(this.resolve.bind(this));
// }
// myPromise.prototype.setValue=function(val){
// 	this.PromiseValue=val;
// }
// myPromise.prototype.setState=function(val){
// 	this._state=val;
// }
// myPromise.prototype.then=function(success){
// 	//then方法会把一个新的微任务推到微任务队列中,并返回一个新的promise
// 	if(this.state!='PENDING'){
// 		success&&queueMicrotask(success.bind(this,this.PromiseValue));
// 	}else{
// 		success&&this.doneList.push(success);
// 	}
// 	let p=new myPromise(function(resolve,reject){})
// 	this.pendingList.push(p);
// 	return p;
// }
// myPromise.prototype.resolve=function(){
// 	queueMicrotask(()=>{
// 		let args=Array.prototype.slice.call(arguments);
//         this.PromiseValue=args.shift();
//         this._state='RESOLVED';
//         this.pendingList.forEach(item=>{
//             item.resolve();
//         })
// 	})
// }

你可能感兴趣的:(前端)