JavaScript中Promise函數then的奧祕探究

Promise概述

• Promise對象是CommonJS工做組提出的一種規範，目的是爲異步操做提供統一接口。

那麼，什麼是Promises？

首先，它是一個對象，也就是說與其餘JavaScript對象的用法，沒有什麼兩樣；其次，它起到代理做用（proxy），充當異步操做與回調函數之間的中介。它使得異步操做具有同步操做的接口，使得程序具有正常的同步運行的流程，回調函數沒必要再一層層嵌套。

簡單說，它的思想是，每個異步任務馬上返回一個Promise對象，因爲是馬上返回，因此能夠採用同步操做的流程。這個Promises對象有一個then方法，容許指定回調函數，在異步任務完成後調用。

Promise的then方法能夠接受前一個函數的執行結果，還能夠保證另外一個Promise的順序執行，這究竟是怎麼作到的呢？

原理圖(先上圖)

問題需求

如何保證多個 promise 順序執行？

實例：

var f1 = function (){
 return new Promise(function (resolve, reject){
  setTimeout(function (){
   console.log("f1 ok!")
   resolve("f1 ok!");
  }, 1000)
 });
}
var f2 = function (){
 return new Promise(function (resolve, reject){
  setTimeout(function (){
   console.log("f2 ok!")
   resolve("f2 ok!");
  }, 3000)
 });
}
var f3 = function (){
 return new Promise(function (resolve, reject){
  setTimeout(function (){
   console.log("f3 ok!")
   resolve("f3 ok!");
  }, 2000)
 });
}
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提高思惟能力

固然若是要並行的話，咱們很容易想到 Promise.all 方法:

Promise.all([f1(), f2(), f3()]).then(function (data){
 console.log(data)
})
// f1 ok! 
// f3 ok! 
// f2 ok! 
// ["f1 ok!", "f2 ok!", "f3 ok!"]

若是要順序執行：

f1().then(f2).then(f3)
// f1 ok!
// f2 ok!
// f3 ok!
 
//或者這樣
 
function f(all) {
 var promise = Promise.resolve();
 all.forEach((p, index) => {
  promise = promise.then(p)
 })
}
f([f1, f2, f3])

那麼問題來了，then是如何作到順序執行的呢，參數既能夠是一個普通函數，也但是是一個返回promise的函數？

then的奧祕

不少實現promise的庫都比較複雜，若是本身實現的話，能夠借鑑下面簡單的代碼：

Promise.prototype.then = function(onFulfilled, onRejected) {
 var promise = this;
 return new Promise(function(resolve, reject) {
  function handle(value) {
   var ret = typeof onFulfilled === 'function' && onFulfilled(value) || value;
   if (ret && typeof ret['then'] == 'function') {
    ret.then(function(value) {
     resolve(value);
    }, function(reason) {
     reject(reason);
    });
   } else {
    resolve(ret);
   }
  }
  function errback(reason) {
   reason = typeof onRejected === 'function' && onRejected(reason) || reason;
   reject(reason);
  }
  if (promise._status === 'PENDING') {
   promise._resolves.push(handle);
   promise._rejects.push(errback);
  } else if (promise._status === FULFILLED) { 
   callback(promise._value);
  } else if (promise._status === REJECTED) {
   errback(promise._reason);
  }
 });
}
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提高思惟能力

重點在then的實現，看上述代碼，每一個then返回的是什麼，是一個新的 Promise，一個新的 Promise，一個新的 Promise

第二個重點是，在內部又處理了一個 回調函數運行結果是 一個 promise的 判斷，若是是那麼等待這個promise運行結束才調用 resolve 更改狀態，關鍵是resolve的調用時機，resolve的調用時機，纔可以往下執行，這兩步就是then函數的關鍵。

是否是 有點暈，請看最開始的圖。