前言

什么是Promise？

相信許多從事前端的小伙伴們都用過Promise，為了解決異步編程的弊端（地獄回調等問題），ES6提供了一個強大的東西，那就是Promise。Promise是將異步任務轉換為同步任務的一個構造函數，通過resolve，reject改變任務的狀態(tài)，必不可少的then方法用來收Promise的值，這些都是Promise的基本使用。那么Promise是如何處理狀態(tài)的，又是如何實現resove，reject方法的，又是如何實現鏈式調用的呢，如果你不知道，那么這篇文章可以幫到你，下面我們一起來解析一下Promise到底是如何實現的，相信看完這篇文章，每個人都可以寫出屬于自己的Promise方法。

這里引入github上的一份符合Promise A+規(guī)范的源碼 https://github.com/then/promise

函數對象Promise

我們先來看看src/index.js這個文件

一些必要的定義

// 定義空函數
function noop() {}

// 用來存儲錯誤信息
var IS_ERROR = {}

// 獲取實例的then
function getThen(obj) {
  try {
    return obj.then;
  } catch (ex) {
    LAST_ERROR = ex;
    return IS_ERROR;
  }
}

// 執(zhí)行then方法回調函數
function tryCallOne(fn, a) {
  try {
    return fn(a);
  } catch (ex) {
    LAST_ERROR = ex;
    return IS_ERROR;
  }
}

// 執(zhí)行Promise構造函數
function tryCallTwo(fn, a, b) {
  try {
    fn(a, b);
  } catch (ex) {
    LAST_ERROR = ex;
    return IS_ERROR;
  }
}

Promise構造函數

function Promise(fn) {
  // 校驗實例
  if (typeof this !== 'object') {
    throw new TypeError('Promises must be constructed via new');
  }
  // 校驗Promise的構造函數
  if (typeof fn !== 'function') {
    throw new TypeError('Promise constructor\'s argument is not a function');
  }
  // 存儲的實例狀態(tài) 0代表還未存儲 1代表存儲了1個 2代表存儲了2個
  this._deferredState = 0;
  // Promise的狀態(tài)  0代表padding  1代表Fulfilled  2代表Rejected 3代表resolve傳入的是promise實例
  this._state = 0;
  // Fulfilled的值
  this._value = null;
  // 用來存儲調用then后的實例
  this._deferreds = null;
  if (fn === noop) return;
  // 處理Promise的參數
  doResolve(fn, this);
}
//以下先不做解釋
newPromise._onHandle = null;
newPromise._onReject = null;
newPromise._noop = noop;

當使用new操作符實例化Promise的時候，必須傳入Promise的構造函數fn，否則將拋出錯誤
然后初始化實例的狀態(tài)和值 最后調用doResolve方法
下面我們一起來看一下doResolve這個方法

doResolve方法

function doResolve(fn, promise) {
  // done防止重復觸發(fā)
  var done = false;
  // tryCallTwo  用于處理并掛載reolve，reject方法
  // 傳入3個參數，Promise構造函數本身，resolve回調，reject回調
  var res = tryCallTwo(fn, function (value) {
    if (done) return;
    done = true;
    // 處理resolve方法
    resolve(promise, value);
  }, function (reason) {
    if (done) return;
    done = true;
    // 處理reject方法
    reject(promise, reason);
  });
  // 報錯則直接reject
  if (!done && res === IS_ERROR) {
    done = true;
    reject(promise, LAST_ERROR);
  }
}

doResolve方法接收兩個參數(Promise的構造函數，Promise的實例也就是this)
這里的tryCallTwo扮演了一個重要角色，它執(zhí)行了構造函數fn，傳入三個參數（fn構造函數，resolve回調函數，reject回調函數）
我們回過頭來看看tryCallTwo這個函數

// 執(zhí)行Promise構造函數
function tryCallTwo(fn, a, b) {
    //...
    fn(a, b);
    //...
}

這里的a，b就是Promise的resolve和reject
執(zhí)行fn并傳入a和b
然后resolve和reject又分別執(zhí)行了resolve方法和reject方法
當實例調用了resolve之后就會執(zhí)行resolve方法，下面來看看resove這個方法

resolve方法

function resolve(self, newValue) {
  // 防止resolve的值傳入實例本身
  if (newValue === self) {
    return reject(
      self,
      new TypeError('A promise cannot be resolved with itself.')
    );
  }
  // 這里的if主要用于處理resolve一個Promise
  if (
    newValue &&
    (typeof newValue === 'object' || typeof newValue === 'function')
  ) {
    // 獲取Promise的then方法
    var then = getThen(newValue);
    if (then === IS_ERROR) {
      return reject(self, LAST_ERROR);
    }
    // 如果傳入的是Promise的實例
    if (
      then === self.then &&
      newValue instanceof newPromise
    ) {
      self._state = 3;
      // 直接把傳入的Promise實例掛載到value
      self._value = newValue;
      finale(self);
      return;
    } else if (typeof then === 'function') {  //如果傳入帶有then方法
      // 把then當作構造函數并且把this指向這個then的對象
      doResolve(then.bind(newValue), self);
      return;
    }
  }
  self._state = 1;
  self._value = newValue;
  finale(self);
}

resolve方法一開始會先判斷resolve傳入的值，如果resolve傳入的是一個「Promise實例」，將會進行以下處理
將實例的狀態(tài)變?yōu)?
將實例的值變?yōu)閭魅氲腜romise實例
調用finale方法
如果resolve傳入的是Promise實例并且「包含then方法」則調用doResolve執(zhí)行這個實例的構造函數

如果resolve傳入的是普通值而不是Promise實例，則做以下處理
將實例的狀態(tài)變?yōu)?
將實例的值變?yōu)閞esolve傳入的值
調用finale方法

reject方法

function reject(self, newValue) {
  // reject的時候狀態(tài)變?yōu)?
  self._state = 2;
  // 保存錯誤信息到_value
  self._value = newValue;
  if (newPromise._onReject) {
    newPromise._onReject(self, newValue);
  }
  finale(self);
}

當Promise執(zhí)行reject的時候此時狀態(tài)變?yōu)?code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">2
保存reject的錯誤信息到_value調用finale方法

finale方法

function finale(self) {
  // 只調用一次then
  if (self._deferredState === 1) {
    handle(self, self._deferreds);
    self._deferreds = null;
  }
  // 調用多次then
  if (self._deferredState === 2) {
    // console.log(self._deferreds);
    for (var i = 0; i < self._deferreds.length; i++) {
      handle(self, self._deferreds[i]);
    }
    self._deferreds = null;
  }
}

finaale方法在這里的作用就相當于handle方法的中轉站，根據不同的情況去調用handle方法
上面有提到過_deferredState是用來記錄存儲的實例狀態(tài)
「同一個Promise對象下」，_deferredState的值是隨著then調用的次數決定的,為什么說只有在同一個Promise對象下才會觸發(fā)呢，我們來看下面一個小例子

const promise2 = new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve('哈哈哈')
    }, 500);
  })
  .then(res => {}) //第一次then
  .then(res => {}) //第二次then

到這里很多小伙伴會以為代碼會在’if(self._deferredState === 2){}‘這個判斷里面執(zhí)行
事實上這樣去調用then的情況下，_deferredState的值永遠只會=1，只會在’if(self._deferredState === 1){}‘的這個判斷里面去執(zhí)行
到這里小伙伴們又會說，不對啊，我這個不是在同一個Promise對象下嗎，我不是只實例化了一次嗎？
這里在使用Promise的時候確實是只實例化了一次，但是每次調用then方法返回的Promise跟實例的Promise并不是同一個引用，也就是說，這里的self并不是實例出來的對象，后面會詳細介紹then是怎么返回Promise對象的

promise2.then(res => {
  console.log(res);
})
promise2.then(res => {
  console.log(res);
})

只有這樣調用then，才會執(zhí)行’if(self._deferredState === 2){}‘這個判斷

Promise.prototype.then

Promise.prototype.then = function(onFulfilled, onRejected) {
  if (this.constructor !== Promise) {
    return safeThen(this, onFulfilled, onRejected);
  }
  // 新建一個promise實例
  var res = new Promise(noop);
  // // new Handler 構建了一個包含新的promise實例和resolve，reject方法的對象
  handle(this, new Handler(onFulfilled, onRejected, res));
  // 每次then處理完之后返回一個新的promise實例
  return res;
};

接收兩個參數resolve和reject函數
一開始先判斷實例的構造函數是不是Promise(防止外部修改prototype.constructor)
這里的safeThen函數不作過多解釋,主要用于實例化外部實例的構造函數并返回實例
創(chuàng)建一個空的Promise實例給res
我們看看下面這句代碼主要做了什么

handle(this, new Handler(onFulfilled, onRejected, res));

我們拆開來看，先看看new Handler實例化得到了什么

// 這個函數的作用就是每次then的時候通過這個構造函數根據resolve和reject構建一個新的對象
function Handler(onFulfilled, onRejected, promise){
  this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
  this.onRejected = typeof onRejected === 'function' ? onRejected : null;
  this.promise = promise;
}

由此可見通過實例化Handler函數可以得到一個大概長這樣子的對象

所以handle函數傳入了2個參數，一個是this，一個是像這樣子的對象,那么，接下來就可以看handle函數做了什么事情了

function handle(self, deferred) {
  // resolve傳入的是promise的實例，this（上下文）則改成傳入的promise實例
  while (self._state === 3) {
    self = self._value;
  }
  if (newPromise._onHandle) {
    newPromise._onHandle(self);
  }
  // 當padding狀態(tài)時（沒有調用resolve也沒有調用reject）
  // 存儲新的promise實例
  if (self._state === 0) {
    if (self._deferredState === 0) {
      self._deferredState = 1;
      self._deferreds = deferred;
      return;
    }
    // 已經調用過1次then
    if (self._deferredState === 1) {
      self._deferredState = 2;
      self._deferreds = [self._deferreds, deferred];
      return;
    }
    // 多次then
    self._deferreds.push(deferred);
    return;
  }
  handleResolved(self, deferred);
}

看上面的代碼注釋大家都應該知道了，handle函數主要就是用作修改_deferredState的值和保存每次then生成的新實例

最后return res 每次調用then方法都返回一個新的Promise實例

鏈式調用

細心的你可能已經發(fā)現了在前面的handle方法里的最下面調用了一個名為handleResolved的函數，話不多說直接上代碼

function handleResolved(self, deferred) {
  // asap(function() {
  //   var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
  //   if (cb === null) {
  //     if (self._state === 1) {
  //       resolve(deferred.promise, self._value);
  //     } else {
  //       reject(deferred.promise, self._value);
  //     }
  //     return;
  //   }
  //   var ret = tryCallOne(cb, self._value);
  //   if (ret === IS_ERROR) {
  //     reject(deferred.promise, LAST_ERROR);
  //   } else {
  //     resolve(deferred.promise, ret);
  //   }
  // });

  // resolve后，獲取then的回調
  var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
  // 如果then沒有回調,則手動調用回調
  if (cb === null) {
    if (self._state === 1) {
      resolve(deferred.promise, self._value);
    } else {
      reject(deferred.promise, self._value);
    }
    return;
  }
  // 獲取then的返回值
  var ret = tryCallOne(cb, self._value);
  if (ret === IS_ERROR) {
    reject(deferred.promise, LAST_ERROR);
  } else {
    resolve(deferred.promise, ret);
  }
}

其實源碼還引入了asap這個庫，我先把這個asap函數注釋掉了，理由是懶得用npm，本文全程是html+js+live-server
但是大家千萬不要忽略asap這個函數!!!
縱觀全文到現在，大家好像并沒有發(fā)現源碼有一點點異步的信息，大家都知道Promise是異步執(zhí)行的，就是靠asap函數,通過setImmediate這個核心方法去異步執(zhí)行asap里面的東西,有興趣的可以去翻翻asap的源碼看下具體是怎么實現的
這里只是為了更好的解析源碼，沒有asap那么Promise就沒有意義了，ok我們回歸正文

這里就很好理解了
通過tryCallOne函數得到then的返回值
然后再次調用resolve，如果報錯或者手動調用reject則調用reject，這樣就完成了Promise的鏈式調用

擴展

src/es6-extensions.js

定義

var TRUE = valuePromise(true);
var FALSE = valuePromise(false);
var NULL = valuePromise(null);
var UNDEFINED = valuePromise(undefined);
var ZERO = valuePromise(0);
var EMPTYSTRING = valuePromise('');

function valuePromise(value) {
  var p = new newPromise(newPromise._noop);
  p._state = 1;
  p._value = value;
  return p;
}

Promise.resolve

Promise.resolve = function (value) {
  // 判斷value是否是Promise得實例
  if (value instanceof Promise) return value;

  // 因為0,'',null等會被隱式轉換成false，所以這里做了精確判斷
  if (value === null) return NULL;
  if (value === undefined) return UNDEFINED;
  if (value === true) return TRUE;
  if (value === false) return FALSE;
  if (value === 0) return ZERO;
  if (value === '') return EMPTYSTRING;


  // 這里的判斷跟之前resolve方法一樣都是判斷傳入的是否是一個Promise
  if (typeof value === 'object' || typeof value === 'function') {
    try {
      var then = value.then;
      if (typeof then === 'function') {
        return new Promise(then.bind(value));
      }
    } catch (ex) {
      return new Promise(function (resolve, reject) {
        reject(ex);
      });
    }
  }
  // 根據valuePromise方法返回一個新的Promise
  return valuePromise(value);
};

try/catch 用于捕獲Promise.resolve傳入的val是否包含then方法

Promise.all

Promise.all = function (arr) {
  var args = iterableToArray(arr);

  return new Promise(function (resolve, reject) {
    if (args.length === 0) return resolve([]);
    var remaining = args.length;
    function res(i, val) {
      if (val && (typeof val === 'object' || typeof val === 'function')) {
        // 如果val是Promise的實例
        if (val instanceof Promise && val.then === Promise.prototype.then) {
          // _state等于3  證明val實例的值也是一個Promise實例,把val替換成新的Promise實例
          while (val._state === 3) {
            val = val._value;
          }
          // resolved成功調用，遞歸處理resolved的值
          if (val._state === 1) return res(i, val._value);
          if (val._state === 2) reject(val._value);
          // 處于padding狀態(tài)時調用then方法并手動處理值
          val.then(function (val) {
            res(i, val);
          }, reject);
          return;
        } else {
          // 如果不是promise的實例且包含then方法
          var then = val.then;
          if (typeof then === 'function') {
            var p = new Promise(then.bind(val));
            p.then(function (val) {
              res(i, val);
            }, reject);
            return;
          }
        }
      }
      args[i] = val;
      // promise.all里面全部為fulFilled狀態(tài)后
      if (--remaining === 0) {
        resolve(args);
      }
    }
    for (var i = 0; i < args.length; i++) {
      res(i, args[i]);
    }
  });
};

第一行用到了iterableToArray函數，這個函數的主要作用是把類數組轉換成可被遍歷的數組

const p1 = new Promise(() => {})
const p2 = new Promise(() => {})
console.log(Array.isArray(Promise.all[p1,p2]))  //false

// 兼容Array.form這個es6語法
var iterableToArray = function (iterable) {
  if (typeof Array.from === 'function') {
    // ES2015+, iterables exist
    iterableToArray = Array.from;
    return Array.from(iterable);
  }

  // ES5, only arrays and array-likes exist
  iterableToArray = function (x) { return Array.prototype.slice.call(x); };
  return Array.prototype.slice.call(iterable);
}

使用Array.prototype.slice.call(x)對Array.from做了兼容

Promise.all = function (arr) {
  var args = iterableToArray(arr);

  return new Promise(function (resolve, reject) {
    if (args.length === 0) return resolve([]);
    var remaining = args.length;
    function res(i, val) {
      ...
    }
    for (var i = 0; i < args.length; i++) {
      res(i, args[i]);
    }
  });
};

先不要看res方法，先看看怎么處理傳進來的參數
循環(huán)調用res處理傳進來的每一項，第一個參數為下標，第二個參數是數組的每一項
再來看下res方法

function res(i, val) {
      if (val && (typeof val === 'object' || typeof val === 'function')) {
        // 如果val是Promise的實例
        if (val instanceof Promise && val.then === Promise.prototype.then) {
          // _state等于3  證明val實例的值也是一個Promise實例,把val替換成新的Promise實例
          while (val._state === 3) {
            val = val._value;
          }
          // resolved成功調用，遞歸處理resolved的值
          if (val._state === 1) return res(i, val._value);
          if (val._state === 2) reject(val._value);
          // 處于padding狀態(tài)時調用then方法并手動處理值
          val.then(function (val) {
            res(i, val);
          }, reject);
          return;
        } else {
          // 如果不是promise的實例且包含then方法
          var then = val.then;
          if (typeof then === 'function') {
            var p = new Promise(then.bind(val));
            p.then(function (val) {
              res(i, val);
            }, reject);
            return;
          }
        }
      }
      args[i] = val;
      // promise.all里面全部為fulFilled狀態(tài)后
      if (--remaining === 0) {
        resolve(args);
      }
    }

如果傳進來的val（args的每一項）不是對象或者function的話，那么直接視為結果值把args[i]給替換掉

args[i] = val;

如果傳進來的是一個Promise，則

if (val instanceof Promise && val.then === Promise.prototype.then) {
      ...
}

如果傳進來的val不是Promise且包含then方法，則

else {
  // 如果不是promise的實例且包含then方法
  var then = val.then;
  if (typeof then === 'function') {
    var p = new newPromise(then.bind(val));
    p.then(function (val) {
      res(i, val);
    }, reject);
    return;
  }
}

重點在這一段

// _state等于3  證明val實例的值也是一個Promise實例,把val替換成新的Promise實例
  while (val._state === 3) {
    val = val._value;
  }
  // resolved成功調用，遞歸處理resolved的值
  if (val._state === 1) return res(i, val._value);
  if (val._state === 2) reject(val._value);
  // 處于padding狀態(tài)時調用then方法并手動處理值
  val.then(function (val) {
    res(i, val);
  }, reject);
  return;

只有當Promise的狀態(tài)為Fulfilled的時候，實例的value才會被正確的處理，否則會執(zhí)行return，所以只要有一個Promise未能成功Fulfilled都不會執(zhí)行resolve(args)

//滿足不了條件
if (--remaining === 0) {
    resolve(args);
}

當得到所有結果值的時候(args[i] = val) == args[i] = val.value，調用resolve方法并傳入結果數組args

看個例子

const promise2 = new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve('哈哈哈')
    }, 700);
})
const promise3 = new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve('哈哈哈2')
    }, 600);
})
  
newPromise.all([promise2,promise3])
.then(res => {
    console.log(res);  //['哈哈哈','哈哈哈2']
})

這里無論什么時候resolve,最后得出的結果數組res都是按照Promise.all([])數組里面的順序來輸出的，這也印證了源碼中為什么要把下標傳入到res()的原因(res(i, args[i]))

Promise.race

Promise.race = function (values) {
  return new Promise(function (resolve, reject) {
    iterableToArray(values).forEach(function(value){
      Promise.resolve(value).then(resolve, reject);
    });
  });
};

Promise.race傳入一個數組，用Promise.resolve處理每一項并調用then方法
最后返回一個Promise實例
這里的Promise.resolve(value).then(resolve, reject)當傳入的Promise誰的狀態(tài)首先變?yōu)?code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Fulfilled，誰就先調用then
因為Promise執(zhí)行resolve一次之后狀態(tài)就不會改變，所以race傳入多個Promise，誰的狀態(tài)先變?yōu)?code style="margin-right: 2px;margin-left: 2px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 148, 247);background: rgba(59, 170, 250, 0.1);padding-right: 2px;padding-left: 2px;border-radius: 2px;height: 21px;line-height: 22px;">Fulfilled，race就返回哪個

const promise2 = new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve('哈哈哈')
    }, 700);
})
const promise3 = new Promise((resolve,reject) => {
    setTimeout(() => {
      resolve('哈哈哈2')
    }, 600);
})

Promise.race([promise2,promise3])
.then(res => {
    console.log(res);  //哈哈哈2
})