es6-promise源代码重点难点分析

• 摘要

vue和axios都可以使用es6-promise来实现f1().then(f2).then(f3)这样的连写形式，es6-promise其实现代浏览器已经支持，无需加载外部文件。由于promise写法明显由于传统写法，已经越来越被高级程序采用，不懂promise就没法看高级程序。

 

• es6-promise源代码重点难点分析

 

本文以axios中的http request源代码为例来分析es6-promise源代码中最复杂深奥难懂的环节，当异步过程嵌套时，代码还是很复杂的，有点超出想象，如果用ajax来实现，还真不太好写。

 

通常用promise写代码是这样写的，比如：

function show(){

       return new Promise((resolve) => {

          bus.$on('optionClickedEvent', (data) => {

            resolve(data.optionIndex) //resolve的目的是要执行then(fn)

            this._hide()

          })

        })

 

show().then(function(index){

 

});

 

 这就是一个异步过程完成之后就执行下一个callback回调并传递参数，这是典型的最简单的写法。

             

首先来看promise构造函数代码：

function Promise(resolver) {

       initializePromise(this, resolver)

 

function initializePromise(promise, resolver) {

  try {

    resolver(function resolvePromise(value) {

      _resolve(promise, value);

    }, function rejectPromise(reason) {

      _reject(promise, reason);

        

调promise时传递一个resolve方法，它会执行resolve方法，传递两个fn，resolve方法是绑定一个事件，事件触发handler函数执行，

handler函数调用fn，传递事件数据，fn再调用内部_resolve方法，继续传递数据value(data.optionIndex)。

 

       function _resolve(promise, value) {  //这个就是es6-promise提供的resolve()方法

  if (promise === value) {

    _reject(promise, selfFulfillment());

  } else if (objectOrFunction(value)) {

    handleMaybeThenable(promise, value, getThen(value));

  } else {

    fulfill(promise, value);

  } 

                    

                     function fulfill(promise, value) {

                            promise._result = value; //传递的数据保存在promise实例

                            asap(publish, promise);

                     }

 

resolve调用asap：

 

var asap = function asap(callback, arg) {

  queue[len] = callback; //传递的方法保存在queue

  queue[len + 1] = arg; //promise实例保存在queue，里面有传递的数据value

  len += 2;

  if (len === 2) {

    if (customSchedulerFn) {

      customSchedulerFn(flush);

    } else {

      scheduleFlush();

 

异步延迟方法有以下几种：

if (isNode) {  //debug看是false

  scheduleFlush = useNextTick();

} else if (BrowserMutationObserver) { //debug看有此方法，类似setTimeout，是异步延迟调度

  scheduleFlush = useMutationObserver(); //执行seMutationObserver()会返回一个方法

} else if (isWorker) { //debug看是false

  scheduleFlush = useMessageChannel();

} else if (browserWindow === undefined && typeof require === 'function') { //debug看都有

  scheduleFlush = attemptVertx();

} else {

  scheduleFlush = useSetTimeout();  //就是setTimeout方法

}

              function useSetTimeout() {

                     var globalSetTimeout = setTimeout;

                     return function () {

                            return globalSetTimeout(flush, 1);

                     };

      

 

              function useMutationObserver() {

                     var iterations = 0;

                     var observer = new BrowserMutationObserver(flush); //flush就是callback，用observer调度执行

                     var node = document.createTextNode('');

                     observer.observe(node, { characterData: true }); //告诉observer观察属性

 

                     return function () {  //这就是scheduleFlush方法

                            node.data = iterations = ++iterations % 2; //人为修改属性触发observer执行callback

                     };

              }

      

                            var queue = new Array(1000);

                            function flush() {  //让observer异步调度执行的callback方法

                            for (var i = 0; i < len; i += 2) {

                                   var callback = queue[i];

                                   var arg = queue[i + 1];

                           

                                   callback(arg);  //执行队列里面的方法，参数也从队列里面取，就是publish(promise)，传递的数据已经保存在promise实例中

                           

                                   queue[i] = undefined;

                                   queue[i + 1] = undefined;

                            }

                           

                            len = 0;

                            }

 

执行scheduleFlush方法就是修改属性触发observer调度执行callback，相关数据对象之前已经准备好了。

                           

另外一种写法是：new MutationObserver(callback);    

 

所以异步调度执行除了setTimeout之外，还有observer，意思是一样的，但内部实现机制不同，setTimeout是延迟机制，

observer是DOM元素变化事件触发机制，一般用不着observer，因为一般都是数据变化要同步更新到DOM，而不是DOM有变化

要同步更新到数据，DOM一般不会主动变化，DOM的变化一般都是数据变化同步更新过去的。

 

 

再回头看传递给asap存储在queue中要调度执行的callback方法如下：

 

function publish(promise) {

  var subscribers = promise._subscribers;

  var settled = promise._state;

  if (subscribers.length === 0) {

    return;

  }

 

  var child = undefined,

      callback = undefined,

      detail = promise._result;  //_result就是执行resolve()时传递的数据(保存在promise实例中)

  for (var i = 0; i < subscribers.length; i += 3) {

    child = subscribers[i];

    callback = subscribers[i + settled];

 

    if (child) {

      invokeCallback(settled, child, callback, detail);

    } else {

      callback(detail);  //这是执行then(handler)方法并且传递数据，数据是之前保存在promise实例中的

    }

  }

 

  promise._subscribers.length = 0;

}

 

是从promise实例中取subscribers[]，再从中取数据方法执行，由于执行resolve就是为了执行then(fn)，因此执行then(fn)

时会调用subscribe方法把fn存储在subscribers[]中，subscribers[]相当于events[]，存储handler。

 

下面看subscribers[]是如何创建的；

 

function then(onFulfillment, onRejection) { // 传入f1/f2两个handler

       var parent = this;

       var child = new this.constructor(noop);

       subscribe(parent, child, onFulfillment, onRejection); //调subscribe存储handler。

       return child;

      

可见then会返回一个promise实例，因此可以连写比如show().then(fn).then(fn)，因为可以层层嵌套，parent就是then所在的

promise实例,child是返回的promise实例，也就是下一级then所在的promise实例。

 

                            function subscribe(parent, child, onFulfillment, onRejection) {

                                   var _subscribers = parent._subscribers;

                                   var length = _subscribers.length;

                                  

                                   parent._onerror = null;

                                  

                                   _subscribers[length] = child;

                                   _subscribers[length + FULFILLED] = onFulfillment;

                                   _subscribers[length + REJECTED] = onRejection;

                                  

                                   if (length === 0 && parent._state) {

                                          asap(publish, parent);

                                   }

                            }

 

可见会把handler存储在then所在的promis实例中的_subscribers[]中，事件订阅者与handler是一类意思。

 

 

可见promise就是形式上写了一个事件机制，实际上几乎就是顺序执行，show() -> then(handler) -> 事件触发 -> resolve -> handler 应用代码绑定了一个事件，事件触发resolve执行。

 

如果show()是一个axios.get过程，那么事件就是http响应事件，handler就是http回调。

 

 

axios.get().then(function(res){

       //http request有响应有返回

},function(){

       //http request无响应/网络异常

});

 

 

axios.get方法：

 

utils.forEach(['delete', 'get', 'head'], function forEachMethodNoData(method) {

  Axios.prototype[method] = function(url, config) {

    return this.request(utils.merge(config || {}, {

      method: method,

      url: url

    }));

  };

 

 

       Axios.prototype.request = function request(config) {

              var chain = [dispatchRequest, undefined]; 

              var promise = Promise.resolve(config); //相当于new promise实例而且会执行resolve传递config数据给dispatchrequest

              while (chain.length) {

                     promise = promise.then(chain.shift(), chain.shift()); //then(fn)会立即执行

              } 

              return promise;  //只有resolve这个promise才能传递response数据到axios.get.then(callback)

       };

chain[0][1]是request拦截函数，[2]是dispatchrequest，[3][4]是response拦截函数。

 

每次axios.get请求都会执行一遍这段代码，把chain里面的handler都执行一遍，其中有dispatchrequest，因此会执行

http request过程，promise.then会反复执行，每次执行都会返回一个promise实例，最后一次执行时返回的promise实例做为

axios.get.then的promise实例，那么http request过程如何resolve这个promise实例，执行then()回调函数？

 

 

                     function dispatchRequest(config) {

                            return adapter(config).then(function onAdapterResolution(response) {

                                    return response; //执行handler返回response数据如何返回到axios.get.then(fn)？

                            }, function onAdapterRejection(reason) {

                                   return Promise.reject(reason);

                            });

                    

                                          function xhrAdapter(config) {

                                                 return new Promise(function dispatchXhrRequest(resolve, reject) {

                                                        request[loadEvent] = function handleLoad() {

                                                               settle(resolve, reject, response); //http request请求响应返回之后执行settle

                    

                                                               function settle(resolve, reject, response) {

                                                                      var validateStatus = response.config.validateStatus;

                                                                     if (!response.status || !validateStatus || validateStatus(response.status)) {

                                                                             resolve(response);  //resolve new promise实例，传递response data

                                                                      } else {

        

then把handler存储起来，resolve执行存储的handler，并传递数据，问题是执行handler返回response数据有何用？

 

实际上是promise嵌套写法：      

Promise.resolve(config).then(function dispatchrequest(config){

       return adapter(config).then(function onAdapterResolution(response) {

                                    return response;

                            }, function onAdapterRejection(reason) {

                                   return Promise.reject(reason);

                            });

       }

).then(function(res){});

 

里面那层promise本身的resolve没问题，问题是里面那层promise的handler返回response如何能返回到外层promise的handler？

 

测试：

Promise.resolve().then(function(){

       return Promise.resolve('hello').then(function (response) {

                                    return response;

                            });

       }

).then(function(res){

       console.log(res);

});

 

结果response数据能传递给最后一层handler。

 

 

为了能debug，直接运行es6-promise.js文件覆盖浏览器缺省的es6-promise，在es6-promise.js文件末尾加一句执行

polyfill()即可。

 

 

从代码看，要new创建promise实例5次，debug看到的也是5个promise实例。

 

再看then代码，看第一次执行then的流程，第一次执行then执行里面的callback时是返回一个promise实例，而执行里层then的

情况不一样，此时执行里面的callback是返回response数据：

 

function then(onFulfillment, onRejection) {

  var parent = this; // then是promise实例的内置方法，this就是then所在的promise实例

  var child = new this.constructor(noop); //新建一个promise实例返回，是下一个then所在的promise实例

 

  if (child[PROMISE_ID] === undefined) {

    makePromise(child);

  }

 

  var _state = parent._state; //then所在的promise实例的状态，对于第一个then，它的promise实例是完成状态

 

  if (_state) {

    (function () {

      var callback = _arguments[_state - 1];

      asap(function () {

        return invokeCallback(_state, child, callback, parent._result); //注意传递的是要返回的child实例

      });

    })();

  } else {

    subscribe(parent, child, onFulfillment, onRejection);

  }

 

  return child;

}

 

       function invokeCallback(settled, promise, callback, detail) { //注意promise是then要返回的新建的child实例

              if (hasCallback) {

                     value = tryCatch(callback, detail); //执行外层then里面的callback并获取callback的返回值(promise实例2)，

                     但当执行里层then里面的callback时返回值是response。

              else if (hasCallback && succeeded) { //如果then里面的callback执行成功

              _resolve(promise, value); //将要返回的promise实例设置成完成状态并传递callback返回值(promise实例2)

 

 

 

 

function _resolve(promise, value) {

  } else if (objectOrFunction(value)) {

    handleMaybeThenable(promise, value, getThen(value));

  } else {

    fulfill(promise, value);

  }

 

              function handleMaybeThenable(promise, maybeThenable, then$$) {

                            if (maybeThenable.constructor === promise.constructor && then$$ === then && maybeThenable.constructor.resolve === resolve) {

                                   handleOwnThenable(promise, maybeThenable);

                                  

                                                 function handleOwnThenable(promise, thenable) {

                                                        if (thenable._state === FULFILLED) {

                                                               fulfill(promise, thenable._result);

      

                                                 promise是外层then要返回的promise实例，在此解决它，传递值是里层promise实例2的result值,

                                                 也就是执行外层下一个then里面的handler并传递数据。

      

因此执行Promise.resolve().then(callback1)时，一是要返回一个promise实例，因为有可能连写.then()，二是要resolve返回的

promise实例才能执行后面可能连写的then(callback2)，resolve情况如何取决于callback1的代码。

如果callback1的代码是return Promise.resolve().then(callback11)，这就嵌套了，就非常复杂，首先，执行这个里层then

会执行callback11，取返回值response，然后resolve(promise,value)解决当前promise实例，会把value保存在当前promise

实例的_result中，因为后面没有再连写.then()，所以从这点来说返回当前promise实例其实没有用处，但对于外层promise是

有用的，里层then返回当前promise实例，按callback1的代码，这个callback执行结果就是返回这个promise实例，那么就回到

外层第一个then继续执行，外层then执行callback1获取到返回值之后，又会把then代码流程走一遍，但此时由于callback1

返回值是一个promise实例，处理流程有所不同，会取这个promise实例的_result值，再resolve(promise,value)，其中promise

就是then本身返回的promise实例(then总是新建一个promise实例返回，再resolve这个实例，从而执行下一个then)，这就会

执行下一个then里面的callback2并且传递value，因此最后一个then(function(res){}里面的callback能获取到'hello'数据。

 

 

 

如果写new Promise(callback1).then(callback2)，意思是一样的，callback1代码决定第一个promise实例如何解决，

callback2代码决定如何解决then返回的promise实例，如果后面没有再连写then，就无需再写解决当前promise实例

（then返回的promise实例）的代码，反之就要写，连写then不复杂，嵌套比连写复杂。

 

promise代码的关键和难点在于如何resolve返回的promise实例，then需要resolve自己返回的promise实例，依此类推，

如果有嵌套，就更复杂了。

 

 

还有一点，就是执行顺序/异步问题，then是把callback存储起来，resolve时会找callback执行，一般是这个逻辑，很显然，

不能上来就执行then里面的callback。但执行then时会判断，如果then所在的promise实例已经完成，则会执行callback，

解决then本身返回的promise实例，以便执行到后面可能还有的then。所以then(callback)有可能在执行到resolve时执行，

也可能在执行then本身时就立即执行，取决于then所在的promise实例的状态，注意then本身返回的promise实例是下一个then

所在的promise实例，换句话说下一个连写的then就是then本身返回的promise实例的内置方法then，以http为例，.then写法

超越了jquery的$.ajax写法，逻辑上非常简单直观，但.then写法的代码原理其实非常复杂抽象深奥。

 

 

再回顾一下axios.get的写法：

Axios.prototype.request = function request(config) {

              var chain = [dispatchRequest, undefined]; 

              var promise = Promise.resolve(config);

              while (chain.length) {

                     promise = promise.then(chain.shift(), chain.shift());

              } 

              return promise;

             

其实就是Promise.resolve(config).then(拦截函数/request函数).then(function(res){

              //http returned

       },function(){

              //http failed

       });

             

创建promise实例传递config，它是用while循环把拦截函数都执行一遍，最后执行request，返回promise实例，

request代码又写了一层同样的嵌套，先完成http，再取response，再返回到外层继续执行下一个then()里面的

callback，也就是http最终的回调处理函数，代码设计非常高级精彩。          

 

• 结语

 

是不是有点晕？

promise从某种程度来说把事情搞复杂了，ajax写法多简单，人人分分钟就会写，前端框架其实从某种程度来说也是把事情搞得非常复杂，但它们有非常高的价值，还是应该使用它们，什么价值呢？就是应用代码可以写得更简洁更直观更高级更有档次，实现应用项目编程的模块化组件化层次化可复用，相比之下传统写法确实太low了，编程技术确实在进步，固守传统简单的编程技术是没有前途的，我们还是要勇于学习进步，这些源代码的作者他们是真正的编程高手大师。