ES6基本的语法(十五) 手写 Promise

首先写一个原始的 Promise

let OP = new promise((res,rej) =>{
	res(0)
})
op.then((val) =>{
	console.log(val)
},(rej) =>{
	console.log(reason)
})

ES5 模拟

function MyPromise(executor){
  this.status = 'pending';
  var _self = this;
  _self.resolveValue = null;
  _self.rejectValue = null;
  function resolve(val){
    if(_self.status == 'pending'){
      _self.status = 'Fulfilled';
      _self.resolveValue = val
    }
  }
  function reject(reason){
  	if(_self.status == 'pending'){
      _self.status = 'Rejected';
      _self.rejectValue = reason;
    }
  }
  try{
  	executor(resolve, reject);
  }catch(e){
  	reject(e);
  }
	executor(resolve, reject);
}

MyPromise.prototype.then = function(onFulfilled,onRejected){
	var self = this;
  if(self.status == 'Fulfilled'){
     onFulfilled(_self.resolveValue);
  }
  if(self.status == 'Rejected'){
     onRejected(_self.rejectValue);
  }
  
  
}

异步操作

function MyPromise(executor){
  this.status = 'pending';
  var _self = this;
  _self.resolveValue = null;
  _self.rejectValue = null;
  _self.ResolveCallBackList = [];
  _self.RejectCallBackList = [];
  
  function resolve(val){
    if(_self.status == 'pending'){
      _self.status = 'Fulfilled';
      _self.resolveValue = val
      _self.ResolveCallBackList.forEach(function(ele){
      	ele();
      })
    }
  }
  function reject(reason){
  	if(_self.status == 'pending'){
      _self.status = 'Rejected';
      _self.rejectValue = reason;
      _self.RejectCallBackList.forEach(function(ele){
      	ele();
      })
    }
  }
  try{
  	executor(resolve, reject);
  }catch(e){
  	reject(e);
  }
	executor(resolve, reject);
}

MyPromise.prototype.then = function(onFulfilled,onRejected){
	var self = this;
  if(self.status == 'Fulfilled'){
     onFulfilled(_self.resolveValue);
  }
  if(self.status == 'Rejected'){
     onRejected(_self.rejectValue);
  }
  //
  if(self.status == 'pending'){
  	self.ResolveCallBackList.push(function(){
    	onFulfilled(_self.resolveValue);
    })
    self.RejectCallBackList.push(function(){
    	onRejected(_self.rejectValue);
    })
  }
  
}

链式调用

function MyPromise(executor){
  this.status = 'pending';
  var _self = this;
  _self.resolveValue = null;
  _self.rejectValue = null;
  _self.ResolveCallBackList = [];
  _self.RejectCallBackList = [];
  
  function resolve(val){
    if(_self.status == 'pending'){
      _self.status = 'Fulfilled';
      _self.resolveValue = val
      _self.ResolveCallBackList.forEach(function(ele){
      	ele();
      })
    }
  }
  function reject(reason){
  	if(_self.status == 'pending'){
      _self.status = 'Rejected';
      _self.rejectValue = reason;
      _self.RejectCallBackList.forEach(function(ele){
      	ele();
      })
    }
  }
  try{
  	executor(resolve, reject);
  }catch(e){
  	reject(e);
  }
	executor(resolve, reject);
}

MyPromise.prototype.then = function(onFulfilled,onRejected){
	var self = this;
  
  var nextPromise = new MyPromise(function(res, rej){
  	 if(self.status == 'Fulfilled'){
         	var nextResolveValue = onFulfilled(_self.resolveValue);
       		res(nextResolveValue)
      }
      if(self.status == 'Rejected'){
         	var nextRejectValue = onRejected(_self.rejectValue);
        	res(nextRejectValue);
      }
      //
      if(self.status == 'pending'){
        self.ResolveCallBackList.push(function(){
          var nextResolveValue = onFulfilled(_self.resolveValue);
       		res(nextResolveValue)
        })
        self.RejectCallBackList.push(function(){
          var nextRejectValue = onRejected(_self.rejectValue);
        	res(nextRejectValue);
        })
      }
  
  })
  
  return nextPromise;
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值