依据规范实现Promise

Promise 构造以及状态声明

1.通过new关键字使用Promise，所以应该用构造函数或者class来实现

 class HSPromise {    
     constructor() {
         
      }  
 }

 2.定义三种状态类型

 const PENDING = 'pending'
 const FULFILLED = 'fulfilled' 
 const REJECTED = 'rejected'

3.设置初始状态

class HSPromise {        constructor() { 
       // 初始状态为pending      
       this.status = PENDING;    
       this.value = null;         
       this.reason = null;   
    }  
  }

resolve 和 reject 方法

 1. 根据规范, 这两个方法是要更改status的, 从pending改到fulfilled/rejected.

 2. 注意两个函数的入参分别是value 和 reason 

class HSPromise {        constructor() {     
       // 初始状态为pending     
       this.status = PENDING;         
       this.value = null;           
       this.reason = null; 
    }      
    resolve(value) {          
       if (this.status === PENDING) {     
           this.status = FULFILLED;        
           this.value = value;          
       }     
    }      
    reject(reason) {    
        if (this.status === PENDING) {         
        this.status = REJECTED;          
        this.reason = reason;         
       }        
    }   
 }

Promsie 入参

 1. 入参是一个函数, 函数接收resolve和reject两个参数.

 2. 注意在初始化promise的时候, 就要执行这个函数, 并且有任何报错都要通过reject抛出去

   class HSPromise {        constructor(fn) {  
          // 初始状态为pending   
          this.status = PENDING;  
          this.value = null;      
          this.reason = null;        
          try {            
              fn(this.resolve.bind(this), this.reject.bind(this));    
          } catch (e) {     
             this.reject(e);     
          }       
     }      
     resolve(value) {   
         if (this.status === PENDING) {           
           this.status = FULFILLED;      
           this.value = value;     
        }   
     }       
     reject(reason) {      
         if (this.status === PENDING) {    
            this.status = REJECTED;    
            this.reason = reason;      
        }    
     }   
 }

then 方法的实现

1.then接收两个参数, onFulfilled 和 onRejected

then(onFulfilled, onRejected) {}

2.检查并处理参数, 参数如果不是function,，就忽略。这个忽略指的是原样返回value或者reason

  isFunction(param) {   
     return typeof param === 'function';   
   }  

  then(onFulfilled, onRejected) {     
     const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled 
        : (value) => {      
            return value;      
          }      
      const rejectedFn = this.isFunction(onRejected) ? onRejected 
        : (reason) => {   
            throw reason    
          }; 
   }        

3.根据当前promise的状态, 调用不同的函数

 then(onFulfilled, onRejected) {    
    const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled 
           : (value) => { 
               return value;      
             }     
    const rejectedFn = this.isFunction(onRejected) ? onRejected 
           : (reason) => { 
               throw reason;       
             };       
    switch (this.status) {           
           case FULFILLED: {          
                fulFilledFn(this.value);     
                break;
            }     
           case REJECTED: {          
                rejectedFn(this.reason);    
                break;
            }   
     } 
 }

4. 按照这个写法, 在then函数被调用的瞬间就会执行。这时候如果status还没变成fulfilled或者rejected怎么办，很有可能还是pending的。

首先要拿到所有的回调, 然后才能在某个时机去执行它们。新建两个数组,，分别存储成功和失败的回调；调用then的时候，如果Promise还是pending就存入数组。

then(onFulfilled, onRejected) {    
    const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled 
           : (value) => { 
               return value;       
             }     
    const rejectedFn = this.isFunction(onRejected) ? onRejected 
           : (reason) => { 
              throw reason;     
             };       
    switch (this.status) {           
           case FULFILLED: {          
                fulFilledFn(this.value);     
                break;
            }     
           case REJECTED: {          
                rejectedFn(this.reason);    
                break;
            } 
           case PENDING: {       
                this.FULFILLED_CALLBACK_LIST.push(realOnFulfilled);          
                this.REJECTED_CALLBACK_LIST.push(realOnRejected);           
                break;     
            }  
     } 
 } 

5.在status发生变化的时候，就执行所有的回调； 这里使用es6的getter和setter， 这样更符合语义。

当status改变时，去做一些操作。(也可以顺序执行，在给status赋值后，下面再加一行forEach，去做一些操作)

get status(){ 
    return this._status;  
   }
set status(newStatus) {  
    switch (newStatus) {   
          case FULFILLED: {     
              this.FULFILLED_CALLBACK_LIST.forEach(callback => {   
                  callback(this.value);              
              });                
              break;             
          }             
          case REJECTED: {      
               this.REJECTED_CALLBACK_LIST.forEach(callback => {         
                  callback(this.reason);               
              });            
              break;          
      }         
   }        
}

then的返回值

1.  如果 onFulfilled 或者 onRejected 抛出一个异常 e ，则 promise2 必须拒绝执行，并返回拒因 e。(需要手动catch代码，遇到报错就reject)

then(onFulfilled, onRejected) {  
      const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled 
             : (value) => {           
                 return value;       
               }       
      const rejectedFn = this.isFunction(onRejected) ? onRejected 
             : (reason) => {         
                 throw reason;     
               };     
      const fulFilledFnWithCatch = (resolve, reject) => {       
             try {         
                fulFilledFn(this.value);       
             } catch (e) {           
                reject(e)         
             }      
       };    
      const rejectedFnWithCatch = (resolve, reject) => {        
             try {        
                rejectedFn(this.reason);    
             } catch (e) {          
                reject(e);      
             }     
      }     
      switch (this.status) {   
             case FULFILLED: {       
                 return new HSPromise(fulFilledFnWithCatch);        
             }    
             case REJECTED: {  
                 return new HSPromise(rejectedFnWithCatch);           
             }       
             case PENDING: {            
                 return new HSPromise((resolve, reject) => {          
                    this.FULFILLED_CALLBACK_LIST.push(() => 
                         fulFilledFnWithCatch(resolve, reject));     
                    this.REJECTED_CALLBACK_LIST.push(() => 
                         rejectedFnWithCatch(resolve, reject));        
                  })         
             }     
         }   
 }

2. 如果 onFulfilled 不是函数且 promise1 成功执行， promise2 必须成功执行并返回相同的值。

 const fulFilledFnWithCatch = (resolve, reject) => {    
      try {        
           fulFilledFn(this.value);           
           resolve(this.value);          
       } catch (e) {    
           reject(e)    
       }      
  }

3. 如果 onRejected 不是函数且 promise1 拒绝执行， promise2 必须拒绝执行并返回相同的据因。

需要注意的是，如果promise1的onRejected执行成功了，promise2应该被resolve

const rejectedFnWithCatch = (resolve, reject) => {      
    try {      
       rejectedFn(this.reason);       
       if (this.isFunction(onRejected)) { 
             resolve();          
         }    
    } catch (e) {       
        reject(e);      
    }   
}

4. 如果 onFulfilled 或者 onRejected 返回一个值 x ，则运行resolvePromise方法

then(onFulfilled, onRejected) {  
      const fulFilledFn = this.isFunction(onFulfilled) ? onFulfilled 
             : (value) => {           
                 return value;       
               }       
      const rejectedFn = this.isFunction(onRejected) ? onRejected 
             : (reason) => {         
                 throw reason;     
               };     
      const fulFilledFnWithCatch = (resolve, reject) => {       
             try {         
                 if (!this.isFunction(onFulfilled)) {      
                     resolve(this.value);            
                  } else {             
                     const x = fulFilledFn(this.value);   
                     this.resolvePromise(newPromise, x, resolve, reject);              
                    }     
             } catch (e) {           
                reject(e)         
             }      
       };    
      const rejectedFnWithCatch = (resolve, reject) => {        
             try {        
                if (!this.isFunction(onRejected)) {          
                     reject(this.reason);           
                } else {                 
                     const x = rejectedFn(this.reason);       
                     this.resolvePromise(newPromise, x, resolve, reject);            
                   }   
             } catch (e) {          
                reject(e);      
             }     
      }     
      switch (this.status) {   
             case FULFILLED: {       
                 const newPromise = new HSPromise((resolve, reject) =>                     
                   fulFilledFnWithCatch(resolve, reject, newPromise))            
                 return newPromise       
             }    
             case REJECTED: {  
                 const newPromise = new HSPromise((resolve, reject) =>                     
                   rejectedFnWithCatch(resolve, reject, newPromise))      
                 return newPromise             
            }       
             case PENDING: {            
                 const newPromise = new HSPromise((resolve, reject) => {                           
                  this.FULFILLED_CALLBACK_LIST.push(() => 
                       fulFilledFnWithCatch(resolve, reject, newPromise));
                  this.REJECTED_CALLBACK_LIST.push(() => 
                      rejectedFnWithCatch(resolve, reject, newPromise));            
                  });                 
                 return newPromise;
             }     
         }   
 } 

resolvePromise 方法

resolvePromise(newPromise, x, resolve, reject) {    
    // 如果 newPromise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 newPromise    
    // 这是为了防止死循环     
   if (newPromise === x) {        
       return reject(new TypeError('The promise and the return value are the same'));  
   } 
   if (x instanceof MPromise) {      
         // 如果 x 为 Promise ，则使 newPromise 接受 x 的状态      
         // 也就是继续执行x，如果执行的时候拿到一个y，还要继续解析y     
         // 这个if跟下面判断then然后拿到执行其实重复了，可有可无      
         x.then((y) => {           
            resolvePromise(newPromise, y, resolve, reject);        
         }, reject);     
   } else if (typeof x === 'object' || this.isFunction(x)) {      
         // 如果 x 为对象或者函数       
         // 这个坑是跑测试的时候发现的，如果x是null，应该直接resolve      
         if (x === null) {         
          return resolve(x);        
         }          
         let then = null; 
         try {      
             // 把 x.then 赋值给 then          
             then = x.then;        
         } catch (error) {          
             // 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise      
             return reject(error);        
          }          
         // 如果 then 是函数        
         if (this.isFunction(then)) {     
             let called = false;        
             // 将 x 作为函数的作用域 this 调用之        
             // 传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，
             //第二个参数叫做 rejectPromise       
            // 名字重名了，直接用匿名函数了    
            try {               
               then.call(         
                    x,         
                    // 如果 resolvePromise 以值 y 为参数被调用，则运行 resolvePromise   
                    (y) => {             
                    // 如果 resolvePromise 和 rejectPromise 均被调用，   
                    // 或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用  
                    // 实现这条需要前面加一个变量called     
                       if (called) return;                
                       called = true;               
                       resolvePromise(promise, y, resolve, reject);         
                },                   
                   // 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise     
                   (r) => {              
                       if (called) return;            
                       called = true;        
                       reject(r);   
                     });           
                } catch (error) {        
                // 如果调用 then 方法抛出了异常 e：          
                // 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之    
                    if (called) return;          
                    // 否则以 e 为据因拒绝 promise      
                    reject(error);          
                 }         
            } else {       
                 // 如果 then 不是函数，以 x 为参数执行 promise     
                 resolve(x);         
            }        
      } else {       
         // 如果 x 不为对象或者函数，以 x 为参数执行 promise         
         resolve(x);     
    }  
 }

onFulfilled 和 onRejected 是微任务

用queueMicrotask包裹执行函数

const fulFilledFnWithCatch = (resolve, reject) => {  
   queueMicrotask(() => {     
       try {         
            if (!this.isFunction(onFulfilled)) {      
                resolve(this.value);            
            } else {             
                const x = fulFilledFn(this.value);   
                this.resolvePromise(newPromise, x, resolve, reject);              
            }     
       } catch (e) {           
            reject(e)         
       }      
   }) }    
const rejectedFnWithCatch = (resolve, reject) => {  
   queueMicrotask(() => {     
       try {        
            if (!this.isFunction(onRejected)) {          
                reject(this.reason);           
            } else {                 
                const x = rejectedFn(this.reason);       
                this.resolvePromise(newPromise, x, resolve, reject);            
            }   
       } catch (e) {          
           reject(e);      
       }    
   }) 
}     

catch方法

  catch (onRejected) {  
      return this.then(null, onRejected);   
   }

Promise.resolve

1. 将现有对象转为Promise对象，如果 Promise.resolve 方法的参数，不是具有 then 方法的对象（又称 thenable 对象），则返回一个新的 Promise 对象，且它的状态为fulfilled。

static resolve(param) {    
    if (param instanceof HSPromise) {   
         return param;  
      }
     return new MyPromise(function (resolve) {         resolve(param);   });}

Promise.reject

1. 返回一个新的Promise实例，该实例的状态为rejected。Promise.reject方法的参数reason，会被传递给实例的回调函数。

static reject(reason) {     
   return new MPromise((resolve, reject) => {      
      reject(reason);      
    });   
 }

Promise.race

const p = Promise.race([p1, p2, p3])

1. 该方法是将多个 Promise 实例，包装成一个新的 Promise 实例。只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

 static race(promiseList) {    
    return new MPromise((resolve, reject) => {   
         const length = promiseList.length;    
         if (length === 0) {           
            return resolve();        
         } else {              
             for (let i = 0; i < length; i++) {   
                 HSPromise.resolve(promiseList[i]).then(   
                     (value) => {                
                       return resolve(value);      
                     },                
                    (reason) => {                 
                       return reject(reason);     
                    });           
              }       
         }     
   })   
 }