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函式的關鍵。

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