理解 Promise 簡單實現的背后原理

在寫javascript時我們往往離不開異步操作，過去我們往往通過回調函數多層嵌套來解決后一個異步操作依賴前一個異步操作，然后為了解決回調地域的痛點，出現了一些解決方案比如事件訂閱／發布的、事件監聽的方式，再后來出現了Promise、Generator、async/await等的異步解決方案。co模塊使用了Promise自動執行Generator，async/await這個Node7.6開始默認支持的最新解決方案也是依賴于Promise,所以了解Promise是非常有必要的，而理解它背后的實現原理則能在使用它的時候更加游刃有余。

實現一個簡單的異步方案

我們知道 Promise 實現多個相互依賴異步操作的執行是通過 .then 來實現的，我們會不由發出疑問，后面的操作是如何得知前面異步操作的完成的，我們可能會產生一種想法，后面有一個函數在一直監聽著前面異步操作的完成，你說的是發布／訂閱模式？Promise的實現個人覺得也有點發布／訂閱的味道，不過它因為有 .then 的鏈式調用，又沒有使用on/emit這種很明顯的訂閱／發布的東西，讓實現變得看起來有點復雜

不過我們可以先想想發布／訂閱是怎么做的，首先有一個事件數組來收集事件，然后訂閱通過on將事件放入數組，emit觸發數組相應事件，嗯嗯，這并不是很復雜，理解了這個以后，我們開始真正地講解實現。

Promise其實內部也有一個 defers 隊列存放事件， .then 的事件就在里面,聰明的你就想到了，程序開始執行的時候， .then 就已經放入下一個事件，然后后面當異步操作完成時， resolve 觸發事件隊列中的事件，便完成了一個 .then 操作， 其實到這里我們就可以很快地想出一種解決方案，每次異步操作完成通過 resolve 觸發事件并將事件從事件隊列中移除，通過事件隊列中的事件的 resolve 使事件的觸發持續下去，我們可以用十幾行代碼就可以實現這樣的邏輯，實現一個簡單的異步編程方案

functionP(fn){
    var value = null;
    var events = [];
    this.then = function(f){
        events.push(f);
        return this;
    }
    functionresolve(newValue){
        var f = events.shift();
        f(newValue, resolve);
    }
    fn(resolve);
}

functiona(){
    return new P(function(resolve){
        console.log("get...");
        setTimeout(function(){
            console.log("get 1");
            resolve(1);
        }, 1000)
    });
}
a().then(function(value, resolve){
    console.log("get...");
    setTimeout(function(){
        console.log("get 2");
        resolve(2);
    }, 1000)
}).then(function(value, resolve){
    console.log(value)
})

這樣就得到控制臺如下的結果

get... 
get 1
get...
get 2
2

我們當然只是初步地簡單接觸異步的一種方案，我們沒有 reject ,沒有進行錯誤處理，這不是完整的，讀者想要擴展的話，可以再自行去實現,接下來我們要去接觸真正的 Promises/A+規范所實現的Promise

簡單理解Promise/A+規范的promise背后的實現

Promise/A+規范： https://promisesaplus.com/

我是通過這篇 《剖析 Promise 之基礎篇》 學習的，本文后面使用的代碼也是來自于此文，讀者可以先看完上文再來加深理解。

假設我們有一個場景，我們需要異步先獲取到用戶id,再通過用戶id異步再獲取到用戶名字，拿到名字輸出，

我們很迅速地寫出Promise的代碼（因為不是Promise的完整實現，就用MyPromise)

functiongetID(){
  return new MyPromise(function(resolve, reject){
    console.log("get id...");
    setTimeout(function(){
      resolve("666");
    }, 1000);
  })
}
functiongetNameByID(id){
  return new MyPromise(function(resolve, reject){
    console.log(id);
    console.log("get name...");
    setTimeout(function(){
      resolve("hjm");
    }, 1000);
  })
}
getID().then(getNameByID).then(function(name){
  console.log(name);
}, function(err){
  console.log(err);
});

正確輸出了我們想要的結果，后面的fn拿到了前面resolve的value

get id...
666
get name...
hjm

其實我們最大的疑問會在于兩個promise它是如何通過 .then 連接起來的,一圖勝千言。

橙色：是剛開始初始化產生的東西（一堆.then產生的）

紫色：是異步開始執行后的一系列流程

第一眼看起來很復雜，下面我們慢慢去一步步拆開

先拋開紫色的不看

每個Promise實例包含狀態 state 、事件隊列 defers 、 value 、 resolve 、 reject

還有一個 handle 函數，當狀態為 pending 時是將Defered{}（包含onFulfilled、onRejected、resolve、reject）放入隊列的操作，當狀態為 fulfilled 或 rejected 會執行相應事件的函數 onFulfilled / onRejected 并且resolve返回的東西

然后為了實現串行Promise， .then 其實又產生了一個新的Promise實例作為中間Promise,

它將 then 里的函數再與自己的實例中的 resolve , reject 共同組成一個Defered{}（包含onFulfilled、onRejected、resolve、reject）,注意這里非常關鍵，它放入了自己實例的 resolve 、 reject ，這將是串行Promise橋梁的關鍵之處（通過閉包實現的），用 handle 函數把這個對象放入前一個Promise實例的事件隊列里

異步開始！

紫色：是異步開始執行后的一系列流程

跟著標號看～假如前面的東西理解的話，你會看得下去的～哈哈

1. getID setTimeout 1000s時間到,調用實例的resolve(
   “666”)
2. 當前Promise實例的狀態改變（等待=>完成），實例的value(=>666)
3. 調用當前handle函數，由于狀態是fulfilled,傳入當前value 666進入事件隊列中的相應函數（它返回的也是一個Promise），getNameByID開始執行
4. 調用resolve通過判斷返回的是不是Promise,如果是的話就調用當前返回的.then
5. 調用.then將前面實例的resolve、reject傳過去作為onFulfilled、onRejected
6. 可以仔細看圖的這條線，這樣就很奇妙地將這個事件隊列中返回的promise和下一個.then中間Promise串起來了，它們引用都是同樣的resolve、reject
7. 當第二個異步操作getNameByID setTimeout 1000s再次執行完成,調用實例的resolve(“hjm”)
8. 當前Promise實例的狀態改變（等待=>完成），實例的value(=>hjm)
9. 調用當前handle函數，由于狀態是fulfilled,傳入當前value hjm進入事件隊列中的相應函數，其實就是下一個中間Promise的resolve(“hjm”)
10. 當前中間Promise實例的狀態改變（等待=>完成），實例的value(=>hjm)
11. 調用當前handle函數，由于狀態是fulfilled,傳入當前value hjm進入事件隊列中的相應函數，打印出console.log(“hjm”),成功拿到name
12. 調用resolve,發現事件隊列已經沒有東西了，程序也就結束了

想要自己運行的同學可以試試看，理清了整個流程會對Promise清晰很多～

Promise的小test

這兩個問題是從 餓了么 node-interview 摘出

判斷輸出以及相應的時間

let doSth = new Promise((resolve, reject) => {
  console.log('hello');
  resolve();
});

setTimeout(()=> {
  doSth.then(()=> {
    console.log('over');
  })
}, 10000);

判斷輸出順序

setTimeout(function(){
  console.log(1)
}, 0);
new Promise(functionexecutor(resolve){
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function(){
  console.log(4);
});
console.log(5);

解答

其實這兩題用三個tip就可以解決

• Promise函數調用就執行
• Promise/A+規范 中then置于當前事件循環的末尾
• setTimeout(fn,0)會在下一個事件循環出現

這里往深處分析，涉及到event loop、macro-task、micro-task等一些東西，個人也沒怎么深入了解，就不加以深入分析了

回到題目，第一題由tip1,所以是馬上console.log(hello),然后隔10s后輸出over

第二題用用三個tip，Promise執行輸出2，調用resolve，再輸出3，然后調用then將輸出4置于事件循環末尾，然后輸出5，到達末尾，輸出4，下一個事件循環，輸出剛開始的1，所以順序是23541

 

 

來自：http://bupt-hjm.github.io/2017/03/23/study-promise/