Promise/A+ 規範的實現

官方文檔地址 https://promisesaplus.com/ 本文不涉及具體用法，只從具體實現上出發

第一步，實現同步版的promise

promise包含幾個關鍵詞：

• resolve
• reject
• then

其中resolve和reject的代碼在正常使用的時候是看不到的，但能夠猜想他們兩個都應該是回調函數，傳遞給了用戶傳入的函數，而then則掛在原型上

結構以下：

calss Promise{
    consturctor(exector){
        function resolve(){
            
        }
        function reject(){

        }
        exector(resolve,reject)
    }
    then(){

    }
}
複製代碼

文檔中提出，promise具有三種邏輯判斷狀態pending、fulfilled、rejected，三者不併處，同一時間只能存在一種狀態

pending向fulfilled或rejected單向流動。

同步版本實現

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
class Promise{
    constructor(exector){
        let self = this;
        self.status = PENDING;
        self.value = undefined;
        self.reason = undefined;
        let resolve = (value)=>{
            if(self.status === PENDING){
                self.status = FULFILLED
                self.value = value;
            }
        }
        let reject = (reason)=>{
            if(self.status === PENDING){
                self.status = REJECTED;
                self.reason = reason
            }
        }
        try{
            exector(resolve,reject)
        }catch(e){
            reject(e)
        }
    }
    then(onFulfilled,onRejected){
        let self = this;
        if(self.status === FULFILLED){
            onFulfilled(self.value);
        }
        if(self.status === REJECTED){
            onRejected(self.reason);
        }
    }
};
複製代碼

如今測試一下：

new Promise((resolve,reject)=>{
    reject("1");
}).then((data)=>{
    console.log(data)
},(reason)=>{
    console.log(reason)
})
複製代碼

resolve和reject都可以獲得準確輸出

存在的問題

異步不支持

new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve(2)
    })
}).then((data)=>{
    console.log(data)
},(reason)=>{
    console.log(reason)
})
複製代碼

如今用setTimeout包裹resolve，結果就是什麼輸出也沒有

同步的話，resolve先執行，onFulfilled後執行，此時狀態已經變成了fulfilled

異步的話，then先執行，此時status仍是pending，沒法進入fulfilled狀態，因此onFulfilled不會執行，setTimeout以後resolve改變status，但已經找不到onFulfilled了

then沒有容錯

new Promise((resolve,reject)=>{
    resolve(2)
}).then()
複製代碼

像上面這種狀況，若是沒有給then方法傳遞參數，那麼程序會報錯

解決存在的問題

異步promise

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
class Promise{
    constructor(exector){
        let self = this;
        self.status = PENDING;
        self.value = undefined;
        self.reason = undefined;
        self.onResolveCallBacks = [];
        self.onRejectCallBacks = [];
        let resolve = (value)=>{
            if(self.status === PENDING){
                self.status = FULFILLED
                self.value = value;
                self.onResolveCallBacks.forEach(cb=>cb(self.value));
            }
        }
        let reject = (reason)=>{
            if(self.status === PENDING){
                self.status = REJECTED;
                self.reason = reason
                self.onRejectCallBacks.forEach(cb=>cb(self.reason));
            }
        }
        try{
            exector(resolve,reject)
        }catch(e){
            reject(e)
        }
    }
    then(onFulfilled,onRejected){
        let self = this;
        if(self.status === FULFILLED){
            onFulfilled(self.value);
        }
        if(self.status === REJECTED){
            onRejected(self.reason);
        }
        if(self.status === PENDING){
            self.onResolveCallBacks.push(onFulfilled);
            self.onRejectCallBacks.push(onRejected);
        }
    }
};
複製代碼

由於resolve和then的執行順序沒法保證，因此要用訂閱發佈的方式來實現，因此建立兩個數組，分別存儲成功和失敗的回調函數

self.onResolveCallBacks = [];
self.onRejectCallBacks = [];
複製代碼

而後再改寫resolve和reject函數，執行發佈

let resolve = (value)=>{
    if(self.status === PENDING){
        self.status = FULFILLED
        self.value = value;
        self.onResolveCallBacks.forEach(cb=>cb(self.value));
    }
}
複製代碼

此時進行測試：

new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject("失敗")
    },2000)
}).then((data)=>{
    console.log(data);
},(reason)=>{
    console.log(reason);
})
複製代碼

成功輸出失敗，到此異步的promise完成了

then容錯

總錯這裏不太好理解，因此後面再作

第二步，Promise的鏈式調用

promise支持鏈式調用，使用方法如：

new Promise((resolve,reject)=>{
    //resolve or reject
}).then((d)=>{
    return d
},(r)=>{
    return r
}).then((d)=>{
    return d
},(r)=>{
    return r
}).then((data)=>{
    console.log(data);
},(reason)=>{
    console.log(reason);
})
複製代碼

上面的.then中return後再then就是鏈式調用

前面知道promise實例具有then方法，因此若是咱們的then方法執行後，再返回一個Promise方法的話，不就能夠繼續進行.then了嗎？

同步鏈式調用

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
class Promise{
    constructor(exector){
        let self = this;
        self.status = PENDING;
        self.value = undefined;
        self.reason = undefined;
        self.onResolveCallBacks = [];
        self.onRejectCallBacks = [];
        let resolve = (value)=>{
            if(self.status === PENDING){
                self.status = FULFILLED
                self.value = value;
                self.onResolveCallBacks.forEach(cb=>cb(self.value));
            }
        }
        let reject = (reason)=>{
            if(self.status === PENDING){
                self.status = REJECTED;
                self.reason = reason
                self.onRejectCallBacks.forEach(cb=>cb(self.reason));
            }
        }
        try{
            exector(resolve,reject)
        }catch(e){
            reject(e)
        }
    }
    then(onFulfilled,onRejected){
        // onFulfilled = typeof onFulfilled == 'function'?onFulfilled:value=>value;
        // onRejected = typeof onRejected == 'function'?onRejected:reason => {throw reason};
        let self = this;
        if(self.status === FULFILLED){
            return new Promise((resolve,reject)=>{
                let x = onFulfilled(self.value);
                resolve(x);
            })
        }
        if(self.status === REJECTED){
            return new Promise((resolve,reject)=>{   
            let x = onRejected(self.reason);
                reject(x);
            })
        }
        if(self.status === PENDING){
            self.onResolveCallBacks.push(onFulfilled);
            self.onRejectCallBacks.push(onRejected);
        }
    }
};
複製代碼

這裏核心就是then方法返回了一個新的promise實例:

return new Promise((resolve,reject)=>{
    let x = onFulfilled(self.value);
    resolve(x);
})
複製代碼

1，pormise(p1)執行resolve，改變status爲fulfilled

2，then方法執行onFulfilled

3，onFulfilled返回一個新的promise，簡稱p2

4，因爲p1是resolve，因此p2也知行resolve

5，p2執行，改變了p2的status爲fulfilled

6，p2繼續執行p2的onFulfilled

至此就作到了一個同步的鏈式調用

異步鏈式調用

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
class Promise{
    constructor(exector){
        let self = this;
        self.status = PENDING;
        self.value = undefined;
        self.reason = undefined;
        self.onResolveCallBacks = [];
        self.onRejectCallBacks = [];
        let resolve = (value)=>{
            if(self.status === PENDING){
                self.status = FULFILLED
                self.value = value;
                self.onResolveCallBacks.forEach(cb=>cb(self.value));
            }
        }
        let reject = (reason)=>{
            if(self.status === PENDING){
                self.status = REJECTED;
                self.reason = reason
                self.onRejectCallBacks.forEach(cb=>cb(self.reason));
            }
        }
        try{
            exector(resolve,reject)
        }catch(e){
            reject(e)
        }
    }
    then(onFulfilled,onRejected){
        let self = this;
        if(self.status === FULFILLED){
            return new Promise((resolve,reject)=>{
                let x = onFulfilled(self.value);
                resolve(x);
            })
        }
        if(self.status === REJECTED){
            return new Promise((resolve,reject)=>{   
            let x = onRejected(self.reason);
                reject(x);
            })
        }
        if(self.status === PENDING){
            return new Promise(function(resolve,reject){
                self.onResolveCallBacks.push(function(){
                    let x = onFulfilled(self.value);
                    resolve(x);
                });
                self.onRejectCallBacks.push(function(){
                    let x = onRejected(self.reason);
                    reject(x);
                });
            })
        }
    }
};

複製代碼

這裏的核心是當status爲pending狀態時，一樣要馬上返回一個promise對象，不然沒有返回值的話，第二次鏈式調用的then方法根本不存在，須要仔細理解這裏

if(self.status === PENDING){
    return new Promise(function(resolve,reject){
        self.onResolveCallBacks.push(function(){
            let x = onFulfilled(self.value);
            resolve(x);
        });
        self.onRejectCallBacks.push(function(){
            let x = onRejected(self.reason);
            reject(x);
        });
    })
}
複製代碼

第三步，鏈式調用其餘的promise實現

通過前面，咱們已經實現了一個鏈式調用的promise，但還存在一種狀況，就是若是第一個onFulfilled返回一個Promise對像的話怎麼處理

new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve(new Promise((resolve,reject)=>{
            resolve("10000");
        }))
    },3000)
}).then((d1)=>{
    console.log(d1);
    return d1
},(r1)=>{
    console.log(r1);
    return r1;
}).then((d2)=>{
    console.log(d2);
},(r2)=>{
    console.log(r2);
})
複製代碼

例如上面的狀況，拿到的結果就出現了問題

const PENDING = "pending";
const FULFILLED = "fulfilled";
const REJECTED = "rejected";
class Promise{
    constructor(exector){
        let self = this;
        self.status = PENDING;
        self.value = undefined;
        self.reason = undefined;
        self.onResolveCallBacks = [];
        self.onRejectCallBacks = [];
        let resolve = (value)=>{
            if(self.status === PENDING){
                self.status = FULFILLED
                self.value = value;
                self.onResolveCallBacks.forEach(cb=>cb(self.value));
            }
        }
        let reject = (reason)=>{
            if(self.status === PENDING){
                self.status = REJECTED;
                self.reason = reason
                self.onRejectCallBacks.forEach(cb=>cb(self.reason));
            }
        }
        try{
            exector(resolve,reject)
        }catch(e){
            reject(e)
        }
    }
    then(onFulfilled,onRejected){
        // onFulfilled = typeof onFulfilled == 'function'?onFulfilled:value=>value;
        // onRejected = typeof onRejected == 'function'?onRejected:reason => {throw reason};
        let self = this;
        if(self.status === FULFILLED){
            return new Promise((resolve,reject)=>{
                let x = onFulfilled(self.value);
                resolve(x);
            })
        }
        if(self.status === REJECTED){
            return new Promise((resolve,reject)=>{   
            let x = onRejected(self.reason);
                reject(x);
            })
        }
        if(self.status === PENDING){
            return new Promise(function(resolve,reject){
                self.onResolveCallBacks.push(function(){
                    let x = onFulfilled(self.value);
                    if(x instanceof Promise){
                        x.then(resolve,reject)
                    }else{
                        resolve(x);
                    }
                });
                self.onRejectCallBacks.push(function(){
                    let x = onRejected(self.reason);
                    if(x instanceof Promise){
                        x.then(resolve,reject);
                    }else{
                        reject(x);
                    }
                });
            })
        }
    }
};
複製代碼

這一次關鍵的代碼是

return new Promise(function(resolve,reject){
    self.onResolveCallBacks.push(function(){
        let x = onFulfilled(self.value);
        if(x instanceof Promise){
            x.then(resolve,reject)
        }else{
            resolve(x);
        }
    });
    self.onRejectCallBacks.push(function(){
        let x = onRejected(self.reason);
        if(x instanceof Promise){
            x.then(resolve,reject);
        }else{
            reject(x);
        }
    });
})
複製代碼

1，經過instanceof判斷了x是不是promise對象

2，若是x是promise對象，稱爲p3

3，將p2的resolve看成p3的onFulfilled

4，當p3resolve的時候，實際之行的是p2的resolve

5，p2的resolve執行的時候，會執行第二次的then方法中添加進來的onFulfilled

繼續完善鏈式調用

new Promise((resolve,reject)=>{
    // setTimeout(()=>{
        resolve("成功")
    // },3000)/
}).then((d1)=>{
    console.log(d1);
    return new Promise((resolve,reject)=>{
        resolve(new Promise((resolve,reject)=>{
            resolve("111")
        }));
    })
},(r1)=>{
    console.log(r1);
    return r1;
}).then((d2)=>{
    console.log(d2);
},(r2)=>{
    console.log(r2);
})
複製代碼

例如上面這種，多層promise對象不斷返回的場景

以前的寫法只能知足一層需求

因此須要使用遞歸來實現，除此以外還要考慮邊界問題，至於邊界能夠對照文檔來逐步實現,所有實現代碼以下：

const PENDING =  'pending';//初始態
const FULFILLED =  'fulfilled';//初始態
const REJECTED =  'rejected';//初始態
function Promise(executor){
  let self = this;//先緩存當前promise實例
  self.status = PENDING;//設置狀態
  //定義存放成功的回調的數組
  self.onResolvedCallbacks = [];
  //定義存放失敗回調的數組
  self.onRejectedCallbacks = [];
  //當調用此方法的時候，若是promise狀態爲pending,的話能夠轉成成功態,若是已是成功態或者失敗態了，則什麼都不作
  //2.1
  function resolve(value){ //2.1.1
    if(value!=null &&value.then&&typeof value.then == 'function'){
      return value.then(resolve,reject);
    }
    //若是是初始態，則轉成成功態
    //爲何要把它用setTimeout包起來
    setTimeout(function(){
      if(self.status == PENDING){
        self.status = FULFILLED;
        self.value = value;//成功後會獲得一個值，這個值不能改
        //調用全部成功的回調
        self.onResolvedCallbacks.forEach(cb=>cb(self.value));
      }
    })

  }
  function reject(reason){ //2.1.2
    setTimeout(function(){
      //若是是初始態，則轉成失敗態
      if(self.status == PENDING){
        self.status = REJECTED;
        self.value = reason;//失敗的緣由給了value
        self.onRejectedCallbacks.forEach(cb=>cb(self.value));
      }
    });

  }
  try{
    //由於此函數執行可能會異常，因此須要捕獲，若是出錯了，須要用錯誤 對象reject
    executor(resolve,reject);
  }catch(e){
    //若是這函數執行失敗了，則用失敗的緣由reject這個promise
    reject(e);
  };
}
function resolvePromise(promise2,x,resolve,reject){
  if(promise2 === x){
    return reject(new TypeError('循環引用'));
  }
  let called = false;//promise2是否已經resolve 或reject了
  if(x instanceof Promise){
    if(x.status == PENDING){
      x.then(function(y){
        resolvePromise(promise2,y,resolve,reject);
      },reject);
    }else{
      x.then(resolve,reject);
    }
  //x是一個thenable對象或函數，只要有then方法的對象，
  }else if(x!= null &&((typeof x=='object')||(typeof x == 'function'))){
    //當咱們的promise和別的promise進行交互，編寫這段代碼的時候儘可能的考慮兼容性，容許別人瞎寫
   try{
     let then = x.then;
     if(typeof then == 'function'){
       //有些promise會同時執行成功和失敗的回調
       then.call(x,function(y){
         //若是promise2已經成功或失敗了，則不會再處理了
          if(called)return;
          called = true;
          resolvePromise(promise2,y,resolve,reject)
       },function(err){
         if(called)return;
         called = true;
         reject(err);
       });
     }else{
       //到此的話x不是一個thenable對象，那直接把它當成值resolve promise2就能夠了
       resolve(x);
     }
   }catch(e){
     if(called)return;
     called = true;
     reject(e);
   }

  }else{
    //若是X是一個普通 的值，則用x的值去resolve promise2
    resolve(x);
  }
}
//onFulfilled 是用來接收promise成功的值或者失敗的緣由
Promise.prototype.then = function(onFulfilled,onRejected){
  //若是成功和失敗的回調沒有傳，則表示這個then沒有任何邏輯，只會把值日後拋
  //2.2.1
  onFulfilled = typeof onFulfilled == 'function'?onFulfilled:function(value){return  value};
  onRejected = typeof onRejected == 'function'?onRejected:reason=>{throw reason};
  //若是當前promise狀態已是成功態了，onFulfilled直接取值
  let self = this;
  let promise2;
  if(self.status == FULFILLED){
    return promise2 = new Promise(function(resolve,reject){
      setTimeout(function(){
        try{
          let x =onFulfilled(self.value);
          //若是獲取到了返回值x,會走解析promise的過程
          resolvePromise(promise2,x,resolve,reject);
        }catch(e){
          //若是執行成功的回調過程當中出錯了，用錯誤緣由把promise2 reject
          reject(e);
        }
      })

    });
  }
  if(self.status == REJECTED){
    return promise2 = new Promise(function(resolve,reject){
      setTimeout(function(){
        try{
          let x =onRejected(self.value);
          resolvePromise(promise2,x,resolve,reject);
        }catch(e){
          reject(e);
        }
      })
    });
  }
  if(self.status == PENDING){
   return promise2 = new Promise(function(resolve,reject){
     self.onResolvedCallbacks.push(function(){
         try{
           let x =onFulfilled(self.value);
           //若是獲取到了返回值x,會走解析promise的過程
           resolvePromise(promise2,x,resolve,reject);
         }catch(e){
           reject(e);
         }

     });
     self.onRejectedCallbacks.push(function(){
         try{
           let x =onRejected(self.value);
           resolvePromise(promise2,x,resolve,reject);
         }catch(e){
           reject(e);
         }
     });
   });
  }
}
module.exports = Promise;
複製代碼

主要是經過resolvePromise方法將具體的遞歸，以及邊界問題所有處理完畢

第四步，promise api實現

Promise.all

接收一個數組，所有成功後才返回

Promise.all = function(arr){
    return new Promise((resolve,reject)=>{
        let resolvList=[];
        arr.forEach((item)=>{
            item.then((data)=>{
                resolvList.push(data);
                console.log(data);
                if(arr.length == resolvList.length){
                    resolve(resolvList);
                }
            },(reason)=>{
                reject(reason);
            })
        })
    })
}
複製代碼

Promise.race

接受一個數組，一個成功即返回

Promise.race = function(arr){
    return new Promise((resolve,reject)=>{
        arr.forEach((item)=>{
            item.then((data)=>{
                resolve(data);
            },(reason)=>{
                reject(reason);
            })
        })
    })
}
複製代碼

Promise.resolve

馬上返回一個promise對象，通常用於沒有promise對象，須要將一個東西，轉爲promise

Promise.resolve = function(value){
    return new Promise(function(resolve){
      resolve(value);
    });
  }
複製代碼

Promise.reject

馬上返回一個promise對象，通常用於沒有promise對象，須要將一個東西，轉爲promise

Promise.reject = function(reason){
  return new Promise(function(resolve,reject){
    reject(reason);
  });
}
複製代碼

終於把這篇寫個大概了，待過一段時間再回顧一遍這個知識，加油