手撕Promise (一)

1:首先初始化一个Promise构造函数

//Promise构造函数
function Promise(){}

//构造函数原型链中的then方法
Promise.prototype.then=function(){};

2:引入Promise和then的参数

//构造函数中需要传入一个函数作为参数 executor
function Promise(executor){}

//同样的,then方法里面也需要传入两个函数 onResolved,onRejected
Promise.prototype.then=function(onResolved,onRejected){};

3:调用executor

function Promise(executor){
  //在Promise里调用executor,并提供resolve,reject 函数的使用
  executor(resolve,reject);
  
}
  
Promise.prototype.then=function(onResolved,onRejected){};

4.初始化Promise的状态

function Promise(executor){
  //两个初始状态
  this.PromiseState='pending';
  this.PromiseResult=null;
  executor(resolve,reject);
  
}
  
Promise.prototype.then=function(onResolved,onRejected){};

5.定义并初步定义resolve 和 reject 函数

function Promise(executor){
  this.PromiseState='pending';
  this.PromiseResult=null;
  //保存this 以便于resolve函数和 reject函数调用
  const self=this; 
  //由于resolve 和 reject 都未定义无法使用 ，所以这里需要定义这两个函数提供使用
  function resolve(data){
   //1.修改对象的状态(promiseState)
   self.PromiseState='fulfilled';
   //2.设置对象结果值(promiseResult)
   self.PromiseResult=data;
}
  
  function reject(data){
   //1.修改对象的状态(promiseState)
   self.PromiseState='rejected';
   //2.设置对象结果值(promiseResult)
   self.PromiseResult=data;
}
  executor(resolve,reject);
} 
Promise.prototype.then=function(onResolved,onRejected){};

​

6.判断PromiseState的状态，以确保这个状态只能修改一次

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;
}
  executor(resolve,reject);
} 
Promise.prototype.then=function(onResolved,onRejected){};

7.处理抛出错误的bug

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 出错了执行reject();
  try{
  executor(resolve,reject);
  }catch(e){
   reject(e);
} 
Promise.prototype.then=function(onResolved,onRejected){};

8.完善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){
  //成功了就执行onResolved函数
  if(this.PromiseState==='fulfilled') 
  onResolved(this.PromiseResult);
  //失败了就执行onRejected函数
  onRejected(this.onRejected);
};

函数执行结果: