手写Promise

要看完整代码直接拉到最下方即可

(1).初始结构搭建与resolve,reject结构搭建

//声明构造函数 Promise对象有两个属性一个PromiseState 一个PromiseResult
function Promise(executor){
  //声明属性
  	this.PromiseState='pending'
  	this.PromiseResult=null
  //保存实例对象的this
  	const self=this
  //在resolve方法中我们要改变Promise对象状态,改变PromiseResult
  function resolve(data){
	self.PromiseState='fulfilled'
	self.PromiseResult=data
  }
  //同理
  function rejected(data){
	if(self.PromiseState!=='pending') return
	self.PromiseState='rejected'
	self.PromiseResult=data
  }
    //同步调用[执行器函数]
  executor(resolve,reject)
}
//添加then方法
Promise.prototype.then=function(onResolved,onRejected){
}

(2).throw抛出异常改变状态

function Promise(executor){
	this.PromiseState='pending'
  	this.PromiseResult=null
  	const self=this
	function resolve(data){
	  self.PromiseState='fulfilled'
	  self.PromiseResult=data
	}
  	function reject(data){
	  self.PromiseState='rejected'
	  self.PromiseResult=data
	}
  //在执行器函数 throw抛出异常想到用try...catch;
 try{
 	executor(resolve,reject)
 }catch(e){
   //修改promise对象的状态为失败
   reject(e)//为什么是e不是data了?因为结果值就是抛出的结果值
 	}
}
Promise.prototype.then=function(onResolved,onRejected){
}

(3)Promise对象状态只能改变一次以及then方法执行回调

function Promise(executor){
  this.PromiseState='pending'
  this.PromiseResult=null
  const self=this
  function resolve(data){
	//判断状态
	if(self.PromiseState!=='pending')return
	self.PromiseState='fulfilled'
	self.PromiseResult=data
  }
  function reject(data){
	if(self.PromiseState!=='pending')return
	self.PromiseState='rejected'
	self.PromiseResult=data
  }
  try{
	executor(resolve,reject)
  }catch(e){
  	reject(e)
  }
}
Promise.prototype.then=function(onResolved,onRejected){
  //调用回调函数
  if(this.PromiseState==='fulfilled){
	 //因为这里是实例对象调用的所以直接用this就行
	 onResolved(this.PromiseResult)
	}
	if(this.PromiseState==='rejected'){
	  onRejected(this.PromiseResult)
	}
}

(4)异步任务回调的执行

function Promise(executor){
  	this.PromiseState='pending'
  	this.PromiseResult=null
  	const self=this
	//声明属性
	this.callback={}
  	function resolve(data){
	  	if(self.PromiseState!=='pending')return
		self.PromiseState='fulfilled'
	  	self.PromiseResult=data
	  //调用成功的回调函数
	  if(self.callback.onResolved){
		self.callback.onResolved(data)
	  }
	}
  	function reject(data){
	  	if(self.PromiseState!=='pending')return
	  	self.PromiseState='rejected'
	  	self.PromiseResult=data
	  //调用失败的回调
	  if(self.callback.onRejected){
		self.callback.onRejected(data)
	  }
}
  try{
  	executor(resolve,reject);
  }catch(e){
	resolve(e)
  }
Promise.prototype.then=function(onResolved,onRejected){
  	if(this.PromiseState==='fulfilled'){
	 onResolved(this.PromiseResult)
	}
	if(this.PromiseState === 'rejected'){
	 onRejected(this.PromiseResult)
	}
  	if(this.PromiseState==='pending'){
	  //保存回调函数
	  this.callback={
	  	onResolved:onResolved
		onRejected:onRejected
	  }
	}
}

(5)指定多个回调的实现

function Promise(executor){  
  this.PromiseState='pending';  
  this.PromiseResult=null;  
  const self=this;  
  //this.callback={}; //这样保存有个弊端,后面的回调函数会把它覆盖掉
  this.callbacks=[]
  function resolve(data){  
    if(self.PromiseState!=='pending') return;  
    self.PromiseState='fulfilled';  
    self.PromiseResult=data;  
    /**if(self.callback.onResolved){  
      self.callback.onResolved(data);  
    }*/
	//遍历
	self.callbacks.forEach(item=>{
		item.onResolved(data)
	})
  }  
  
  function reject(data){ 
    if(self.PromiseState!=='pending') return; 
    self.PromiseState='rejected';  
    self.PromiseResult=data;  
    /**if(self.callback.onRejected){  
      self.callback.onRejected(data);  
    }*/
	self.callbacks.forEach(item=>{
	  item.onRejected(data)
	})
  }  
  
  try{  
    executor(resolve, reject);  
  }catch(e){  
    reject(e);  
  }  
}  
  
Promise.prototype.then=function(onResolved,onRejected){  
  if(this.PromiseState==='fulfilled'){ 
    onResolved(this.PromiseResult);  
  } else if(this.PromiseState==='rejected'){ 
    onRejected(this.PromiseResult);  
  }  
  if(this.PromiseState==='pending'){  
    this.callbacks.push({  
      onResolved:onResolved, 
      onRejected:onRejected  
    })  
  }  
};

(6)同步修改then方法和异步修改then方法结果返回

这里我一开始犯了个错误,想着在执行器函数中写过try...catch捕获错误了,不用再在then方法中捕获。其实是不对的,因为执行器函数中的try...catch是用来捕获在初始化解析或拒绝状态时可能发生的错误。then方法中的try...catch则是用来捕获onResolved或onRejected回调函数中可能抛出的异常。这些异常通常发生在Promise已经解析或拒绝之后,注册新的回调函数并执行他们。

手写Promise

全站热榜

创作者周榜