promise源碼解析

前言

大部分同窗對promise，可能還停留在會使用es6的promise，尚未深刻學習。咱們都知道promise內部經過reslove、reject來判斷執行哪一個函數，原型上面的then一樣的，也有成功回調函數跟失敗回調函數。

這篇文章，咱們來說講promise的源碼，從源碼來分析，promise的原理。Tip:  閱讀源碼是枯燥的

 

使用

使用es6的promise經常使用的方式有兩種：
一、使用CDN 引入方式，咱們在html中引入es6-promise.js、es6-promise.auto.js這兩個js文件，就可使用了。
二、經過node安裝方式，有兩種安裝方式：

yarn add es6-promise
or
npm install es6-promise

  安裝完成後就可使用了，好比：var Promise = require('es6-promise').Promise;

Tip: 若是要在Node或瀏覽器中經過CommonJS填充全局環境，請使用如下代碼段：

require('es6-promise').polyfill();
require('es6-promise/auto');

這裏不會將結果分配給任何變量。該方法將在調用時修補全局環境。polyfill ()polyfill ()Promise

分析
聲明Promise

var Promise$1 = function () {
  function Promise(resolver) {
    this[PROMISE_ID] = nextId();
    this._result = this._state = undefined;
    this._subscribers = [];

    if (noop !== resolver) {
      typeof resolver !== 'function' && needsResolver();
      this instanceof Promise ? initializePromise(this, resolver) : needsNew();
    }
  }

從代碼上能夠看出跟promise交互的主要方式是經過其`then`方法，它會記錄回調用來接收promise的最終值或者promise沒法履行的緣由。

咱們來看看resolve方法：

function resolve$1(object) {
  /*jshint validthis:true */
  var Constructor = this;

  if (object && typeof object === 'object' && object.constructor === Constructor) {
    return object;
  }

  var promise = new Constructor(noop);
  resolve(promise, object);
  return promise;
}

function resolve(promise, value) {
  // 首先一個Promise的resolce結果不能是本身 （本身返回本身而後等待本身，循環）
  if (promise === value) {
    reject(promise, selfFulfillment());
  } else if (objectOrFunction(value)) {
    // 當新的值存在，類型是對象或者函數的時候
    handleMaybeThenable(promise, value, getThen(value));
  } else {
    // 最終的結束流程,都是進入這個函數
    fulfill(promise, value);
  }
}

`Promise.resolve`會返回一個將被resolve的promise傳遞了「value」。 咱們能夠用下面的簡寫：

  let promise = Promise.resolve(1);
  promise.then(function(value){
    // value === 1
  });

最後看下then方法：

Promise.prototype.then = function (didFulfill, didReject) {
    if (debug.warnings() && arguments.length > 0 &&
        typeof didFulfill !== "function" &&
        typeof didReject !== "function") {
        var msg = ".then() only accepts functions but was passed: " +
                util.classString(didFulfill);
        if (arguments.length > 1) {
            msg += ", " + util.classString(didReject);
        }
        this._warn(msg);
    }
    return this._then(didFulfill, didReject, undefined, undefined, undefined);
};

 

總結：
promise執行步驟以下：

一、 首先建立Promise 二、 而後設置須要執行的函數 三、 接着設置完成的回調 四、 跟着開始執行函數 五、 最後根據執行結果選擇回調