本文首發于 vivo互聯網技術 微信公眾號 
鏈接： https://mp.weixin.qq.com/s/Lp_5BXdpm7G29Z7zT_S-bQ
作者：Morrain

成都創新互聯專注于企業網絡營銷推廣、網站重做改版、秀英網站定制設計、自適應品牌網站建設、HTML5建站、成都商城網站開發、集團公司官網建設、成都外貿網站建設公司、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為秀英等各大城市提供網站開發制作服務。

了用法，原生提供了Promise對象。更多關于 Promise 的介紹請參考阮一峰老師的  ES6入門 之 Promise 對象。

很多同學在學習 Promise 時，知其然卻不知其所以然，對其中的用法理解不了。 本系列文章由淺入深逐步實現 Promise，并結合流程圖、實例以及動畫進行演示，達到深刻理解 Promise 用法的目的。

本系列文章有如下幾個章節組成：

1. 圖解 Promise 實現原理（一）—— 基礎實現

2. 圖解 Promise 實現原理（二）—— Promise 鏈式調用

3. 圖解 Promise 實現原理（三）—— Promise 原型方法實現

4. 圖解 Promise 實現原理（四）—— Promise 靜態方法實現

一、前言

上一節中，實現了 Promise 的原型方法。包括增加異常狀態，catch以及 finally。截至目前，Promise 的實現如下：

class Promise {
  callbacks = [];
  state = 'pending';//增加狀態
  value = null;//保存結果
  constructor(fn) {
    fn(this._resolve.bind(this), this._reject.bind(this));
  }
  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      this._handle({
        onFulfilled: onFulfilled || null,
        onRejected: onRejected || null,
        resolve: resolve,
        reject: reject
      });
    });
  }
  catch(onError) {
    return this.then(null, onError);
  }
  finally(onDone) {
    if (typeof onDone !== 'function') return this.then();
 
    let Promise = this.constructor;
    return this.then(
      value => Promise.resolve(onDone()).then(() => value),
      reason => Promise.resolve(onDone()).then(() => { throw reason })
    );
  }
  _handle(callback) {
    if (this.state === 'pending') {
      this.callbacks.push(callback);
      return;
    }
 
    let cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected;
 
    if (!cb) {//如果then中沒有傳遞任何東西
      cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
      cb(this.value);
      return;
    }
 
    let ret;
 
    try {
      ret = cb(this.value);
      cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
    } catch (error) {
      ret = error;
      cb = callback.reject
    } finally {
      cb(ret);
    }
 
  }
  _resolve(value) {
 
    if (value && (typeof value === 'object' || typeof value === 'function')) {
      var then = value.then;
      if (typeof then === 'function') {
        then.call(value, this._resolve.bind(this), this._reject.bind(this));
        return;
      }
    }
 
    this.state = 'fulfilled';//改變狀態
    this.value = value;//保存結果
    this.callbacks.forEach(callback => this._handle(callback));
  }
  _reject(error) {
    this.state = 'rejected';
    this.value = error;
    this.callbacks.forEach(callback => this._handle(callback));
  }
}

接下來再介紹一下 Promise 中靜態方法的實現，譬如 Promise.resolve、Promise.reject、Promise.all 和 Promise.race。其它靜態方法的實現也是類似的。

二、靜態方法

1、Promise.resolve && Promise.reject

除了前文中提到的 Promise實例的原型方法外，Promise 還提供了 Promise.resolve 和Promise.reject 方法。用于將非 Promise 實例包裝為 Promise 實例。例如：

Promise.resolve('foo')
// 等價于
new Promise(resolve => resolve('foo'))

Promise.resolve 的參數不同對應的處理也不同，如果 Promise.resolve 的參數是一個 Promise的實例，那么 Promise.resolve 將不做任何改動，直接返回這個 Promise 實例，如果是一個基本數據類型，譬如上例中的字符串，Promise.resolve 就會新建一個 Promise 實例返回。這樣當我們不清楚拿到的對象到底是不是 Promise 實例時，為了保證統一的行為，Promise.resolve 就變得很有用了。看一個例子：

const Id2NameMap = {};
const getNameById = function (id) {
 
  if (Id2NameMap[id]) return Id2NameMap[id];
 
  return new Promise(resolve => {
    mockGetNameById(id, function (name) {
      Id2NameMap[id] = name;
      resolve(name);
    })
  });
}
getNameById(id).then(name => {
  console.log(name);
});

上面的場景我們會經常碰到，為了減少請求，經常會緩存數據，我們獲取到 id 對應的名字后，存到 Id2NameMap 對象里，下次再通過 id 去請求 id 對應的 name 時先看 Id2NameMap里有沒有，如果有就直接返回對應的 name，如果沒有就發起異步請求，獲取到后放到 Id2NameMap 中去。

其實上面的代碼是有問題的，如果命中 Id2NameMap 里的值，getNameById 返回的結果就是 name，而不是 Promise 實例。此時 getNameById(id).then 會報錯。在我們不清楚返回的是否是 Promise 實例的情況下，就可以使用 Promise.resolve 進行包裝：

Promise.resolve(getNameById(id)).then(name => {
  console.log(name);
});

這樣一來，不管 getNameById(id) 返回的是什么，邏輯都沒有問題。看下面的Demo:

demo-Promise.resolve 的源碼

在實現 Promise.resolve 之前，我們先看下它的參數分為哪些情況：

（1）參數是一個 Promise 實例

如果參數是 Promise 實例，那么 Promise.resolve 將不做任何修改、原封不動地返回這個實例。

（2）參數是一個 thenable 對象

thenable 對象指的是具有 then 方法的對象，比如下面這個對象。

let thenable = {
  then: function(onFulfilled) {
    onFulfilled(42);
  }
};[object Object]

Promise.resolve 方法會將這個對象轉為 Promise 對象，然后就立即執行 thenable 對象的 then方法。

let thenable = {
  then: function(onFulfilled) {
    onFulfilled(42);
  }
};
 
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
  console.log(value);  // 42
});

上面代碼中，thenable對象的then方法執行后，對象p1的狀態就變為resolved，從而立即執行最后那個then方法指定的回調函數，輸出 42。

（3）參數不是具有 then 方法的對象，或根本就不是對象

如果參數是一個原始值，或者是一個不具有then方法的對象，則 Promise.resolve 方法返回一個新的 Promise 對象，狀態為 resolved。

（4）不帶任務參數

Promise.resolve 方法允許調用時不帶參數，直接返回一個 resolved 狀態的 Promise 對象。

static resolve(value) {
  if (value && value instanceof Promise) {
    return value;
  } else if (value && typeof value === 'object' && typeof value.then === 'function') {
    let then = value.then;
    return new Promise(resolve => {
      then(resolve);
    });
 
 
  } else if (value) {
    return new Promise(resolve => resolve(value));
  } else {
    return new Promise(resolve => resolve());
  }
}

當前文章：圖解Promise實現原理（四）——Promise靜態方法實現-創新互聯
網址分享：http://m.2m8n56k.cn/article30/dodppo.html

成都網站建設公司_創新互聯，為您提供網站維護、品牌網站建設、品牌網站制作、電子商務、Google、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯