Promise實現原理

前言

在Promise沒有出現以前，異步編程須要經過回調的方式進行完成，當回調函數嵌套過多時，會使代碼醜化，也下降了代碼的可理解性，後期維護起來會相對困難，Promise是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最先提出和實現，ES6將其寫進了語言標準，統一了用法，原生提供了Promise對象，本文主要針對Promise/A+規範，實現一個小型的Promise對象。

Promise/A+ 規範

Promise規範有不少，如Promise/A，Promise/B，Promise/D 以及 Promise/A 的升級版Promise/A+，由於ES6主要用的是Promise/A+規範，該規範內容也比較多，咱們挑幾個簡單的說明下:

1. Promise自己是一個狀態機，每個Promise實例只能有三個狀態，pending、fulfilled、reject，狀態之間的轉化只能是pending->fulfilled、pending->reject，狀態變化不可逆。
2. Promise有一個then方法，該方法能夠被調用屢次，而且返回一個Promise對象（返回新的Promise仍是老的Promise對象，規範沒有提）。
3. 支持鏈式調用。
4. 內部保存有一個value值，用來保存上次執行的結果值，若是報錯，則保存的是異常信息。

具體規範可參考:

• 英文版：promisesaplus.com/
• 中文版：【翻譯】Promises/A+規範

實現

因爲Promise爲狀態機，咱們需先定義狀態

var PENDING = 0; // 進行中
var FULFILLED = 1; // 成功
var REJECTED = 2; // 失敗

基本代碼

function Promise(fn) {
  var state = PENDING;  // 存儲PENDING, FULFILLED或者REJECTED的狀態
  var value = null;  // 存儲成功或失敗的結果值
  var handlers = []; // 存儲成功或失敗的處理程序，經過調用`.then`或者`.done`方法

  // 成功狀態變化
  function fulfill(result) {
      state = FULFILLED;
      value = result;
      handlers.forEach(handle); // 處理函數，下文會提到
      handlers = null;
   }

  // 失敗狀態變化
  function reject(error) {
      state = REJECTED;
      value = error;
      handlers.forEach(handle); // 處理函數，下文會提到
      handlers = null;
  }
}

實現resolve方法

resolve方法能夠接受兩種參數，一種爲普通的值/對象，另一種爲一個Promise對象，若是是普通的值/對象，則直接把結果傳遞到下一個對象；
若是是一個 Promise 對象，則必須先等待這個子任務序列完成。

function Promise(fn) {
  ...
  function resolve(result) {
      try {
        var then = getThen(result);
        if (then) {
          doResolve(then.bind(result), resolve, reject)
          return;
        }
        fulfill(result);
      } catch (e) {
        reject(e);
      }
  }
  ...
}

resolve須要兩個輔助方法getThen、和doResolve。

// getThen 檢查若是value是一個Promise對象，則返回then方法等待執行完成。
function getThen(value) {
  var t = typeof value;
  if (value && (t === 'object' || t === 'function')) {
    var then = value.then;
    if (typeof then === 'function') {
      return then;
    }
  }
  return null;
}
// 異常參數檢查函數，確保onFulfilled和onRejected兩個函數中只執行一個且只執行一次，可是不保證異步。
function doResolve(fn, onFulfilled, onRejected) {
  var done = false;
  try {
    fn(
      function(value) {
        if (done) return;
        done = true;
        onFulfilled(value);
      },
      function(reason) {
        if (done) return;
        done = true;
        onRejected(reason);
      }
    );
  } catch(ex) {
    if (done) return;
    done = true;
    onRejected(ex);
  }
}

上面已經完成了一個完整的內部狀態機，但咱們並無暴露一個方法去解析或則觀察 Promise 。如今讓咱們開始解析 Promise ：

function Promise(fn) {
  ...
  doResolve(fn, resolve, reject);
}

如你所見，咱們複用了doResolve，由於對於初始化的fn也要對其進行控制。fn容許調用resolve或則reject屢次，甚至拋出異常。這徹底取決於咱們去保證promise對象僅被resolved或則rejected一次，且狀態不能隨意改變。

then方法實現

在實現then方法以前，咱們這裏實現了一個執行方法done，該方法用來處理執行then方法的回調函數，一下爲promise.done(onFullfilled, onRejected)方法的幾個點。

• onFulfilled 和 onRejected 二者只能有一個被執行，且執行次數爲一
• 該方法僅能被調用一次, 一旦調用了該方法，則 promise 鏈式調用結束
• 不管是否 promise 已經被解析，均可以調用該方法

function Promise(fn) {
  ...
  // 不一樣狀態，進行不一樣的處理
  function handle(handler) {
    if (state === PENDING) {
      handlers.push(handler);
    } else {
      if (state === FULFILLED && typeof handler.onFulfilled === 'function') {
        handler.onFulfilled(value);
      }
      if (state === REJECTED && typeof handler.onRejected === 'function') {
        handler.onRejected(value);
      }
    }
  }

  this.done = function (onFulfilled, onRejected) {
    // 保證異步
    setTimeout(function () {
      handle({onFulfilled: onFulfilled, onRejected: onRejected});
    }, 0);
  }
}

當 Promise 被 resolved 或者 rejected 時，咱們保證 handlers 將被通知。
then方法

function Promise(fn) {
  ...
  this.then = function(onFulfilled, onRejected) {
    var self = this;
    return new Promise(function (resolve, reject) {
      self.done(function (result) {
        if (typeof onFulfilled === 'function') {
          try {
            // onFulfilled方法要有返回值！
            return resolve(onFulfilled(result));
          } catch (ex) {
            return reject(ex);
          }
        } else {
          return resolve(result);
        }
      }, function (error) {
        if (typeof onRejected === 'function') {
          try {
            return resolve(onRejected(error));
          } catch (ex) {
            return reject(ex);
          }
        } else {
          return reject(error);
        }
      });
    });
  }
}

catch方法，咱們直接調用then處理異常

this.catch = function(errorHandle) {
  return this.then(null, errorHandle);
}

以上爲promise實現原理~