深入Promise(一)——Promise實(shí)現(xiàn)詳解-創(chuàng)新互聯(lián)

if (typeof Promise === 'undefined') {
  return}

實(shí)現(xiàn) Promise/A+ 規(guī)范的庫(kù)有很多，lie是一個(gè)精簡(jiǎn)的實(shí)現(xiàn) Promise/A+ 的庫(kù)，并且通過了 Promise/A+ 專門的測(cè)試集，但 lie 的代碼寫的有點(diǎn)繞，我在 lie 的代碼基礎(chǔ)上進(jìn)行了修改，使之更容易閱讀和理解，并發(fā)布了 appoint模塊供大家參考。

目前成都創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、阜平網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

Promise/A+ 規(guī)范

Promise 規(guī)范有很多，如 Promise/A，Promise/B，Promise/D 以及 Promise/A 的升級(jí)版 Promise/A+，有興趣的可以去了解下，最終 ES6 中采用了 Promise/A+ 規(guī)范。在講解 Promise 實(shí)現(xiàn)之前，當(dāng)然要先了解 Promise/A+ 規(guī)范。Promise/A+ 規(guī)范參考：

英文版：https://promisesaplus.com/
中文版：http://malcolmyu.github.io/malnote/2015/06/12/Promises-A-Plus/

注意：沒有特殊說明以下 promise 均指代 Promise 實(shí)例。

規(guī)范雖然不長(zhǎng)，但細(xì)節(jié)也比較多，我挑出幾個(gè)要點(diǎn)簡(jiǎn)單說明下：

Promise 本質(zhì)是一個(gè)狀態(tài)機(jī)。每個(gè) promise 只能是 3 種狀態(tài)中的一種：pending、fulfilled 或 rejected。狀態(tài)轉(zhuǎn)變只能是 pending -> fulfilled 或者 pending -> rejected。狀態(tài)轉(zhuǎn)變不可逆。
then 方法可以被同一個(gè) promise 調(diào)用多次。
then 方法必須返回一個(gè) promise。規(guī)范里沒有明確說明返回一個(gè)新的 promise 還是復(fù)用老的 promise（即 return this），大多數(shù)實(shí)現(xiàn)都是返回一個(gè)新的 promise，而且復(fù)用老的 promise 可能改變內(nèi)部狀態(tài)，這與規(guī)范也是相違背的。
值穿透。下面會(huì)細(xì)講。

從頭實(shí)現(xiàn) Promise

我們知道 Promise 是一個(gè)構(gòu)造函數(shù)，需要用 new 調(diào)用，并有以下幾個(gè) api：

function Promise(resolver) {}Promise.prototype.then = function() {}Promise.prototype.catch = function() {}Promise.resolve = function() {}Promise.reject = function() {}Promise.all = function() {}Promise.race = function() {}

下面我們以 appoint 為最終目標(biāo)，開始一步一步構(gòu)建完整的 Promise 實(shí)現(xiàn)。

'use strict';var immediate = require('immediate');function INTERNAL() {}function isFunction(func) {
  return typeof func === 'function';}function isObject(obj) {
  return typeof obj === 'object';}function isArray(arr) {
  return Object.prototype.toString.call(arr) === '[object Array]';}var PENDING = 0;var FULFILLED = 1;var REJECTED = 2;module.exports = Promise;function Promise(resolver) {
  if (!isFunction(resolver)) {
    throw new TypeError('resolver must be a function');
  }
  this.state = PENDING;
  this.value = void 0;
  this.queue = [];
  if (resolver !== INTERNAL) {
    safelyResolveThen(this, resolver);
  }}

immediate 是一個(gè)將同步轉(zhuǎn)異步執(zhí)行的庫(kù)。INTERNAL 就是一個(gè)空函數(shù)，類似于一些代碼庫(kù)中的 noop。定義了 3 個(gè)輔助函數(shù)：isFunction、isObject 和 isArray。定義了 3 種狀態(tài)：PENDING、FULFILLED 和 REJECTED。safelyResolveThen 后面講。promise 內(nèi)部有三個(gè)變量：

state: 當(dāng)前 promise 的狀態(tài)，初始值為 PENDING。狀態(tài)改變只能是 PENDING -> FULFILLED 或 PENDING -> REJECTED。
value: 當(dāng) state 是 FULFILLED 時(shí)存儲(chǔ)返回值，當(dāng) state 是 REJECTED 時(shí)存儲(chǔ)錯(cuò)誤。
queue: promise 內(nèi)部的回調(diào)隊(duì)列，這是個(gè)什么玩意兒？為什么是一個(gè)數(shù)組？

Promise 實(shí)現(xiàn)基本原理

先看一段代碼：

var Promise = require('appoint')var promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('haha')
  }, 1000)})var a = promise.then(function onSuccess() {})var b = promise.catch(function onError() {})console.log(require('util').inspect(promise, { depth: 10 }))console.log(promise.queue[0].promise === a)console.log(promise.queue[1].promise === b)

打印出：

Promise {
  state: 0,
  value: undefined,
  queue:
   [ QueueItem {
       promise: Promise { state: 0, value: undefined, queue: [] },
       callFulfilled: [Function],
       callRejected: [Function] },
     QueueItem {
       promise: Promise { state: 0, value: undefined, queue: [] },
       callFulfilled: [Function],
       callRejected: [Function] } ] }truetrue

可以看出，queue 數(shù)組中有兩個(gè)對(duì)象。因?yàn)橐?guī)范中規(guī)定：then 方法可以被同一個(gè) promise 調(diào)用多次。上例中在調(diào)用 .then 和 .catch 時(shí) promise 并沒有被 resolve，所以將 .then 和 .catch 生成的新 promise（a 和 b）和正確時(shí)的回調(diào)（onSuccess 包裝成 callFulfilled）和錯(cuò)誤時(shí)的回調(diào)（onError 包裝成 callRejected）生成一個(gè) QueueItem 實(shí)例并 push 到 queue 數(shù)組里，所以上面兩個(gè) console.log 打印 true。當(dāng) promise 狀態(tài)改變時(shí)遍歷內(nèi)部 queue 數(shù)組，統(tǒng)一執(zhí)行成功（FULFILLED -> callFulfilled）或失敗（REJECTED -> callRejected）的回調(diào)（傳入 promise 的 value 值），生成的結(jié)果分別設(shè)置 a 和 b 的 state 和 value，這就是 Promise 實(shí)現(xiàn)的基本原理。
再來看另一個(gè)例子：

var Promise = require('appoint')
var promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('haha')
  }, 1000)
})
promise
  .then(() => {})
  .then(() => {})
  .then(() => {})
console.log(require('util').inspect(promise, { depth: 10 }))

打印出：

Promise {
  state: 0,
  value: undefined,
  queue:
   [ QueueItem {
       promise:
        Promise {
          state: 0,
          value: undefined,
          queue:
           [ QueueItem {
               promise:
                Promise {
                  state: 0,
                  value: undefined,
                  queue:
                   [ QueueItem {
                       promise: Promise { state: 0, value: undefined, queue: [] },
                       callFulfilled: [Function],
                       callRejected: [Function] } ] },
               callFulfilled: [Function],
               callRejected: [Function] } ] },
       callFulfilled: [Function],
       callRejected: [Function] } ] }

調(diào)用了 3 次 then，每個(gè) then 將它生成的 promise 放到了調(diào)用它的 promise 隊(duì)列里，形成了 3 層調(diào)用關(guān)系。當(dāng)最外層的 promise 狀態(tài)改變時(shí)，遍歷它的 queue 數(shù)組調(diào)用對(duì)應(yīng)的回調(diào)，設(shè)置子 promise 的 state 和 value 并遍歷它的 queue 數(shù)組調(diào)用對(duì)應(yīng)的回調(diào)，然后設(shè)置孫 promise 的 state 和 value 并遍歷它的 queue 數(shù)組調(diào)用對(duì)應(yīng)的回調(diào)......依次類推。

safelyResolveThen

function safelyResolveThen(self, then) {
  var called = false;
  try {
    then(function (value) {
      if (called) {
        return;
      }
      called = true;
      doResolve(self, value);
    }, function (error) {
      if (called) {
        return;
      }
      called = true;
      doReject(self, error);
    });
  } catch (error) {
    if (called) {
      return;
    }
    called = true;
    doReject(self, error);
  }
}

safelyResolveThen 顧名思義用來『安全的執(zhí)行 then 函數(shù)』，這里的 then 函數(shù)指『第一個(gè)參數(shù)是 resolve 函數(shù)第二個(gè)參數(shù)是 reject 函數(shù)的函數(shù)』，如下兩種情況：

構(gòu)造函數(shù)的參數(shù)，即這里的 resolver：

new Promise(function resolver(resolve, reject) {
  setTimeout(() => {
    resolve('haha')
  }, 1000)})

promise 的 then：
```
promise.then(resolve, reject)
```

safelyResolveThen 有 3 個(gè)作用：

try...catch 捕獲拋出的異常，如：

new Promise(function resolver(resolve, reject) {
  throw new Error('Oops')
})

called 控制 resolve 或 reject 只執(zhí)行一次，多次調(diào)用沒有任何作用。即：

var Promise = require('appoint')var promise = new Promise(function resolver(resolve, reject) {
  setTimeout(() => {
    resolve('haha')
  }, 1000)
  reject('error')})promise.then(console.log)promise.catch(console.error)

打印 error，不會(huì)再打印 haha。

沒有錯(cuò)誤則執(zhí)行 doResolve，有錯(cuò)誤則執(zhí)行 doReject。

doResolve 和 doReject

function doResolve(self, value) {
  try {
    var then = getThen(value);
    if (then) {
      safelyResolveThen(self, then);
    } else {
      self.state = FULFILLED;
      self.value = value;
      self.queue.forEach(function (queueItem) {
        queueItem.callFulfilled(value);
      });
    }
    return self;
  } catch (error) {
    return doReject(self, error);
  }}function doReject(self, error) {
  self.state = REJECTED;
  self.value = error;
  self.queue.forEach(function (queueItem) {
    queueItem.callRejected(error);
  });
  return self;}

doReject 就是設(shè)置 promise 的 state 為 REJECTED，value 為 error，callRejected 如前面提到的通知子 promise：『我這里出了點(diǎn)問題呀』然后子 promise 根據(jù)傳入的錯(cuò)誤設(shè)置自己的狀態(tài)和值。doResolve 結(jié)合 safelyResolveThen 使用不斷地解包 promise，直至返回值是非 promise 對(duì)象后，設(shè)置 promise 的狀態(tài)和值，然后通知子 promise：『我這里有值了喲』然后子 promise 根據(jù)傳入的值設(shè)置自己的狀態(tài)和值。

這里有個(gè)輔助函數(shù) getThen：

function getThen(obj) {
  var then = obj && obj.then;
  if (obj && (isObject(obj) || isFunction(obj)) && isFunction(then)) {
    return function appyThen() {
      then.apply(obj, arguments);
    };
  }
}

規(guī)范中規(guī)定：如果 then 是函數(shù)，將 x（這里是 obj）作為函數(shù)的 this 調(diào)用。

Promise.prototype.then 和 Promise.prototype.catch

Promise.prototype.then = function (onFulfilled, onRejected) {
  if (!isFunction(onFulfilled) && this.state === FULFILLED ||
    !isFunction(onRejected) && this.state === REJECTED) {
    return this;
  }
  var promise = new this.constructor(INTERNAL);
  if (this.state !== PENDING) {
    var resolver = this.state === FULFILLED ? onFulfilled : onRejected;
    unwrap(promise, resolver, this.value);
  } else {
    this.queue.push(new QueueItem(promise, onFulfilled, onRejected));
  }
  return promise;};Promise.prototype.catch = function (onRejected) {
  return this.then(null, onRejected);};

上述代碼中的 return this 實(shí)現(xiàn)了值穿透，后面會(huì)講。可以看出，then 方法中生成了一個(gè)新的 promise 然后返回，符合規(guī)范要求。如果 promise 的狀態(tài)改變了，則調(diào)用 unwrap，否則將生成的 promise 加入到當(dāng)前 promise 的回調(diào)隊(duì)列 queue 里，之前講解了如何消費(fèi) queue。有 3 點(diǎn)需要講解：

Promise 構(gòu)造函數(shù)傳入了一個(gè) INTERNAL 即空函數(shù)，因?yàn)檫@個(gè)新產(chǎn)生的 promise 可以認(rèn)為是內(nèi)部的 promise，需要根據(jù)外部的 promise 的狀態(tài)和值產(chǎn)生自身的狀態(tài)和值，不需要傳入回調(diào)函數(shù)，而外部 Promise 需要傳入回調(diào)函數(shù)決定它的狀態(tài)和值。所以之前 Promise 的構(gòu)造函數(shù)里做了判斷區(qū)分外部調(diào)用還是內(nèi)部調(diào)用：
```
if (resolver !== INTERNAL) {
  safelyResolveThen(this, resolver);}
```

unwrap 代碼如下：

function unwrap(promise, func, value) {
  immediate(function () {
    var returnValue;
    try {
      returnValue = func(value);
    } catch (error) {
      return doReject(promise, error);
    }
    if (returnValue === promise) {
      doReject(promise, new TypeError('Cannot resolve promise with itself'));
    } else {
      doResolve(promise, returnValue);
    }
  });}

從名字也可以理解是用來解包（即執(zhí)行函數(shù)）的，第一個(gè)參數(shù)是子 promise，第二個(gè)參數(shù)是父 promise 的 then 的回調(diào)（onFulfilled/onRejected），第三個(gè)參數(shù)是父 promise 的值（正常值/錯(cuò)誤）。有 3 點(diǎn)需要說明：

使用 immediate 將同步代碼變異步。如：

var Promise = require('appoint')var promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('haha')
  }, 1000)})promise.then(() => {
  promise.then(() => {
    console.log('1')
  })
  console.log('2')})

打印 2 1，去掉 immediate 則打印 1 2。

try...catch 用來捕獲 then/catch 內(nèi)拋出的異常，并調(diào)用 doReject，如：

promise.then(() => {
  throw new Error('haha')})promise.catch(() => {
  throw new Error('haha')})

返回的值不能是 promise 本身，否則會(huì)造成死循環(huán)，如 node@4.6.0 下運(yùn)行：

var promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('haha')
  }, 1000)
})
var a = promise.then(() => {
  return a
})

a.catch(console.log)// [TypeError: Chaining cycle detected for promise #<Promise>]

QueueItem 代碼如下：
```
function QueueItem(promise, onFulfilled, onRejected) {
  this.promise = promise;
  this.callFulfilled = function (value) {
    doResolve(this.promise, value);
  };
  this.callRejected = function (error) {
    doReject(this.promise, error);
  };
  if (isFunction(onFulfilled)) {
    this.callFulfilled = function (value) {
      unwrap(this.promise, onFulfilled, value);
    };
  }
  if (isFunction(onRejected)) {
    this.callRejected = function (error) {
      unwrap(this.promise, onRejected, error);
    };
  }}
```
promise 為 then 生成的新 promise（以下稱為『子promise』），onFulfilled 和 onRejected 即是 then 參數(shù)中的 onFulfilled 和 onRejected。從上面代碼可以看出：比如當(dāng) promise 狀態(tài)變?yōu)?FULFILLED 時(shí)，之前注冊(cè)的 then 函數(shù)，用 callFulfilled 調(diào)用 unwrap 進(jìn)行解包最終得出子 promise 的狀態(tài)和值，之前注冊(cè)的 catch 函數(shù)，用 callFulfilled 直接調(diào)用 doResolve，設(shè)置隊(duì)列里子 promise 的狀態(tài)和值。當(dāng) promise 狀態(tài)變?yōu)?REJECTED 類似。

注意：promise.catch(onRejected) 就是 promise.then(null, onRejected) 的語(yǔ)法糖。

至此，Promise 的核心實(shí)現(xiàn)都完成了。

值穿透

Promise.prototype.then = function (onFulfilled, onRejected) {
  if (!isFunction(onFulfilled) && this.state === FULFILLED ||
    !isFunction(onRejected) && this.state === REJECTED) {
    return this;
  }
  ...};

上面提到了值穿透問題，值穿透即：

var Promise = require('appoint')
var promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('haha')
  }, 1000)
})
promise
  .then('hehe')
  .then(console.log)

最終打印 haha 而不是 hehe。

通過 return this 只實(shí)現(xiàn)了值穿透的一種情況，其實(shí)值穿透有兩種情況：

promise 已經(jīng)是 FULFILLED/REJECTED 時(shí)，通過 return this 實(shí)現(xiàn)的值穿透：

var Promise = require('appoint')var promise = new Promise(function (resolve) {
  setTimeout(() => {
    resolve('haha')
  }, 1000)})promise.then(() => {
  promise.then().then((res) => {// ①
    console.log(res)// haha
  })
  promise.catch().then((res) => {// ②
    console.log(res)// haha
  })
  console.log(promise.then() === promise.catch())// true
  console.log(promise.then(1) === promise.catch({ name: 'nswbmw' }))// true})

上述代碼①②處 promise 已經(jīng)是 FULFILLED 了符合條件所以執(zhí)行了 return this。注意：原生的 Promise 實(shí)現(xiàn)里并不是這樣實(shí)現(xiàn)的，所以會(huì)打印兩個(gè) false。

promise 是 PENDING 時(shí)，通過生成新的 promise 加入到父 promise 的 queue，父 promise 有值時(shí)調(diào)用 callFulfilled->doResolve 或 callRejected->doReject（因?yàn)?then/catch 傳入的參數(shù)不是函數(shù)）設(shè)置子 promise 的狀態(tài)和值為父 promise 的狀態(tài)和值。如：
```
var Promise = require('appoint')var promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('haha')
  }, 1000)})var a = promise.then()a.then((res) => {
  console.log(res)// haha})var b = promise.catch()b.then((res) => {
  console.log(res)// haha})console.log(a === b)// false
```

Promise.resolve 和 Promise.reject

Promise.resolve = resolve;function resolve(value) {
  if (value instanceof this) {
    return value;
  }
  return doResolve(new this(INTERNAL), value);}Promise.reject = reject;function reject(reason) {
  var promise = new this(INTERNAL);
  return doReject(promise, reason);}

當(dāng) Promise.resolve 參數(shù)是一個(gè) promise 時(shí)，直接返回該值。

Promise.all

Promise.all = all;function all(iterable) {
  var self = this;
  if (!isArray(iterable)) {
    return this.reject(new TypeError('must be an array'));
  }

  var len = iterable.length;
  var called = false;
  if (!len) {
    return this.resolve([]);
  }

  var values = new Array(len);
  var resolved = 0;
  var i = -1;
  var promise = new this(INTERNAL);

  while (++i < len) {
    allResolver(iterable[i], i);
  }
  return promise;
  function allResolver(value, i) {
    self.resolve(value).then(resolveFromAll, function (error) {
      if (!called) {
        called = true;
        doReject(promise, error);
      }
    });
    function resolveFromAll(outValue) {
      values[i] = outValue;
      if (++resolved === len && !called) {
        called = true;
        doResolve(promise, values);
      }
    }
  }}

Promise.all 用來并行執(zhí)行多個(gè) promise/值，當(dāng)所有 promise/值執(zhí)行完畢后或有一個(gè)發(fā)生錯(cuò)誤時(shí)返回?？梢钥闯觯?/p>

Promise.all 內(nèi)部生成了一個(gè)新的 promise 返回。
called 用來控制即使有多個(gè) promise reject 也只有第一個(gè)生效。
values 用來存儲(chǔ)結(jié)果。
當(dāng)最后一個(gè) promise 得出結(jié)果后，使用 doResolve(promise, values) 設(shè)置 promise 的 state 為 FULFILLED，value 為結(jié)果數(shù)組 values。

Promise.race

Promise.race = race;function race(iterable) {
  var self = this;
  if (!isArray(iterable)) {
    return this.reject(new TypeError('must be an array'));
  }

  var len = iterable.length;
  var called = false;
  if (!len) {
    return this.resolve([]);
  }

  var i = -1;
  var promise = new this(INTERNAL);

  while (++i < len) {
    resolver(iterable[i]);
  }
  return promise;
  function resolver(value) {
    self.resolve(value).then(function (response) {
      if (!called) {
        called = true;
        doResolve(promise, response);
      }
    }, function (error) {
      if (!called) {
        called = true;
        doReject(promise, error);
      }
    });
  }}

Promise.race 接受一個(gè)數(shù)組，當(dāng)數(shù)組中有一個(gè) resolve 或 reject 時(shí)返回。跟 Promise.all 代碼相近，只不過這里用 called 控制只要有任何一個(gè) promise onFulfilled/onRejected 立即去設(shè)置 promise 的狀態(tài)和值。

至此，Promise 的實(shí)現(xiàn)全部講解完畢。

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證，機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。

文章標(biāo)題：深入Promise(一)——Promise實(shí)現(xiàn)詳解-創(chuàng)新互聯(lián)
分享URL：http://muchs.cn/article34/ddsope.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、網(wǎng)站維護(hù)、商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容