JavaScript Promise超详细源码解读-天翼云

Promise超详细源码解读

说到promise，相信大家在日常开发中都经常使用到，它是我们异步操作中必不可少的一部分，可以让代码看起来变得更好理解；

我曾在技术社区看过许多关于promise底层原理的文章，大概原理明白，这次，我准备系统的分析实现源码并记录下来，本文将一行行代码去分析最后附加流程图和总结，希望这能对你有帮助；

promise的实现库有这么多，接下来我们以github的promise ployfill为例，想看完整实现代码的在这里；

最基础用法

我们先想象一下promise最常见的使用方式，大概像这样

new Promise((resolve,reject) => {
    setTimeout( () => resolve('result'),1000)
}).then( (value) => {
    console.log( value )
})

首先是new Promise()，那么Promise肯定是一个定好的构造函数，果然。

Promise Func

function Promise(fn) {
  if (!(this instanceof Promise))
    throw new TypeError('Promises must be constructed via new');
  if (typeof fn !== 'function') throw new TypeError('not a function');
  this._state = 0;
  this._handled = false;
  this._value = undefined;
  this._deferreds = [];
  doResolve(fn, this);
}

可以看到这里大致限制了必须要使用new操作符调用Promise，还有我们的参数必须是函数类型的；
初始化属性(_state,__handled,_value,_deferreds)，这些属性后面要用到;

先看一下_state

/** 内部状态码
   * 0: pending，当前Promise正在执行中，默认值
   * 1: fulfilled, 执行了resolve函数，且参数_value不是期约，即_value instanceof Promise === false
   * 2: rejected，执行了reject函数
   * 3: fulfilled，执行了resolve函数，且参数_value是期约，即_value instanceof Promise === true
*/

_value为存放我们最终resolve或reject的结果
_deferreds缓存then方法执行后生成的handle实例对象，把传入的回调缓存成handle实例对象的属性

调用doResolve(fn, this);

可以看到我们把fn和this传递给了doResolve执行，接着看看doResolve;

doResolve Func

function doResolve(fn, self) {
  var done = false;
  try {
    fn(
      function(value) {
        if (done) return;
        done = true;
        resolve(self, value);
      },
      function(reason) {
        if (done) return;
        done = true;
        reject(self, reason);
      }
    );
  } catch (ex) {
    if (done) return;
    done = true;
    reject(self, ex);
  }
}

可以看到doResolve很简单，它直接调用了我们new Promise(fn)传递进去的fn，把两个匿名函数传递给了resolve,reject给我们在外部操作完成后调用，然后如果有出错会直接帮我们调用reject；

// 可以看回我们new Promise(fn)传递进去的fn
(resolve,reject) => {
    setTimeout( () => resolve('result'),1000)
}

执行fn，我们的setTimeout在1000ms后调用了resolve('result')；

传递给fn的resolve是

function(value) {
	if (done) return;
	done = true;
	resolve(self, value);
}

这里的done实际上是为了防止我们多次调用resolve，只有第一次生效吧；

由于我们是异步调用resolve的，执行完setTimeout之后就会执行then，1000ms后才会调用resolve [我们往then Func里面看](#then Func) 由于我们fn里只调用了resolve，接下来我们直接看resolve

resolve Func

function resolve(self, newValue) {
  try {
    if (newValue === self)
      throw new TypeError('A promise cannot be resolved with itself.');
    if (
      newValue &&
      (typeof newValue === 'object' || typeof newValue === 'function')
    ) {
      var then = newValue.then;
      if (newValue instanceof Promise) {
        self._state = 3;
        self._value = newValue;
        finale(self);
        return;
      } else if (typeof then === 'function') {
        doResolve(bind(then, newValue), self);
        return;
      }
    }
    self._state = 1;
    self._value = newValue;
    finale(self);
  } catch (e) {
    reject(self, e);
  }
}

resolve主要是校验我们newValue的类型，我们的newValue是'result'，自然是string

self是通过Promise Func -> doResolve Func,传递下去的this，也就是首先判断的是newValue不能是new Promise的this本身
newValue是object || function类型

newValue是Promise实例，像我们上面说的_state会是3()，_把newValue赋值给我们最终resolve的结果，并执行finale(self);
newValue.then是函数，会重新执行doResolve，不会执行finale；

newValue不是Promise实例，newValue.then也不是函数，_state会是1()，把newValue赋值给我们最终resolve的结果，并执行finale(self);

很显然，我们的例子里resolve的类型效验会执行以上list->3，我们看看finale

finale Func

function finale(self) {
  if (self._state === 2 && self._deferreds.length === 0) {
    Promise._immediateFn(function() {
      if (!self._handled) {
        Promise._unhandledRejectionFn(self._value);
      }
    });
  }

  for (var i = 0, len = self._deferreds.length; i < len; i++) {
    handle(self, self._deferreds[i]);
  }
  self._deferreds = null;
}

_state为1，finale代码会执行

for (var i = 0, len = self._deferreds.length; i < len; i++) {
    handle(self, self._deferreds[i]);
}
self._deferreds = null;

😅呃...循环了then Func -> handle Func push进去的deferred，又重新拿着deferred执行handle Func??

这里跟我们在then Func的调用方式好像没有什么不同，只是我们调用完resolve Func后_state和_value就有值了

self._state = 1;
self._value = newValue;

[去看handle Func](#handle Func)

then Func

function noop() {}
Promise.prototype.then = function(onFulfilled, onRejected) {
  // @ts-ignore
  var prom = new this.constructor(noop);

  handle(this, new Handler(onFulfilled, onRejected, prom));
  return prom;
};

可以看到then是在Promise原型链上的方法

noop

noop是一个空函数，这里的this.constructor即Object.constructor；

即new Object.constructor(function noop() {})；

😂...赶紧去控制台试试看;

(function anonymous(
) {
function noop(){}
}

呃...实际上我们得到一个包装好参数的函数，把它赋值为prom

handle

首先handle(this, new Handler(onFulfilled, onRejected, prom));

new Handler(onFulfilled, onRejected, prom)

function Handler(onFulfilled, onRejected, promise) {
  this.onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : null;
  this.onRejected = typeof onRejected === 'function' ? onRejected : null;
  this.promise = promise;
}

这个函数还是挺好理解的，new Handler创建一个handler对象，这里的this也就是handler；

handler下有三个属性，onFulfilled, onRejected是我们调用promise.then(onFulfilled, onRejected)是传递进来的，promise也就是我们刚刚赋值的prom函数

然后就是handle(this, handler)，当前的的this为当前的new promise对象，handler为刚刚的new Handler实例对象

handle Func

function handle(self, deferred) {
  while (self._state === 3) {
    self = self._value;
  }
  if (self._state === 0) {
    self._deferreds.push(deferred);
    return;
  }
  self._handled = true;
  Promise._immediateFn(function() {
    var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
    if (cb === null) {
      (self._state === 1 ? resolve : reject)(deferred.promise, self._value);
      return;
    }
    var ret;
    try {
      ret = cb(self._value);
    } catch (e) {
      reject(deferred.promise, e);
      return;
    }
    resolve(deferred.promise, ret);
  });
}

如果是then Func调用的handle Func，我们到当前为止并没有改变_state，即为0，直接self._deferreds.push(deferred)后return了

if (self._state === 0) {
    self._deferreds.push(deferred);
    return;
}

到这里为止，我们的then Func一系列的调用就完毕了，1000ms后会调用resolve，[我们看回resolve Func](#resolve Func)

如果是从resolve Func -> finale Func调用的handle Func，那么_state和_value就有值了，在我们例子里_state为1，_value为'result'，会执行

self._handled = true;
Promise._immediateFn(function() {
    var cb = self._state === 1 ? deferred.onFulfilled : deferred.onRejected;
    if (cb === null) {
    	(self._state === 1 ? resolve : reject)(deferred.promise, self._value);
    	return;
    }
    var ret;
    try {
    	ret = cb(self._value);
    } catch (e) {
    	reject(deferred.promise, e);
    	return;
    }
    resolve(deferred.promise, ret);
});

Promise._immediateFn的参数会在不久后执行，我们先看内容，后面再详细看这个

根据_state判断调用deferred.onFulfilled || deferred.onRejected，我们说_state有四个值，忘记的可以回去上面看看，代码执行到这里state的值只有1 || 2；

deferred为我们调用then Func->handle->push进去的handle实例化对象；

到ret = cb(self._value);为止，我们整个new Promise((resolve,reject) => {}).then(() => {})就走完了，可以看到是通过_state值去判断调用我们then Func传递进去的两个函数的

回到immediateFn

var setTimeoutFunc = setTimeout;
Promise._immediateFn =
  // @ts-ignore
  (typeof setImmediate === 'function' &&
    function(fn) {
      // @ts-ignore
      setImmediate(fn);
    }) ||
  function(fn) {
    setTimeoutFunc(fn, 0);
  };

呃...阿这..😲Promise._immediateFn实际上是使用setTimeout执行的，由于即使设定timeout为0，setTimeout也会有一定的延时，这样哪怕我们在fn中直接执行了resolve Func，执行顺序也会比then Func晚;

重新梳理思维导图

例子1

new Promise((resolve,reject) => {
    resolve('result')
}).then( (value) => {
    console.log( value )
})

JavaScript Promise超详细源码解读

例子2

new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve('result')
    },1000)
}).then( (value) => {
    console.log( value )
})

JavaScript Promise超详细源码解读

例子3

var promise = new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve('result')
    },1000)
});
setTimeout(() => {
    promise.then((val) => {
    	console.log('then2' + val)
	})
},500)
setTimeout(() => {
    promise.then((val) => {
    	console.log('then4' + val)
	})
},1200)

JavaScript Promise超详细源码解读

看到这里大家也许都明白了，在Promise实例上调用then必定会new Handler把传入的回调暂存到实例对象里，再调用handle传入Handler实例，handle会根据this._state状态执行不同的操作

_state为0则把handle实例push到this.__deferreds，并return终止函数，等待resolve函数执行在循环this.__deferreds重新调用handle；

_state为1则表示已调用resolve，此时直接延时(setTimeout 0)执行handle实例的onFulfilled

Promise.all实现

Promise.all = function(arr) {
  return new Promise(function(resolve, reject) {
    if (!isArray(arr)) {
      return reject(new TypeError('Promise.all accepts an array'));
    }

    var args = Array.prototype.slice.call(arr);
    if (args.length === 0) return resolve([]);
    var remaining = args.length;

    function res(i, val) {
      try {
        if (val && (typeof val === 'object' || typeof val === 'function')) {
          var then = val.then;
          if (typeof then === 'function') {
            then.call(
              val,
              function(val) {
                res(i, val);
              },
              reject
            );
            return;
          }
        }
        args[i] = val;
        if (--remaining === 0) {
          resolve(args);
        }
      } catch (ex) {
        reject(ex);
      }
    }

    for (var i = 0; i < args.length; i++) {
      res(i, args[i]);
    }
  });
};

这个应该和大多数人想的都差不多，实际上就是返回了一个新的Promise实例，remaining记录传递进来的Promise实例数组长度，再循环传递进来的Promise实例数组，调用每个实例的then方法，传入的回调函数把结果push到一个临时数组，再把remaining--，当remaining为0时，就可以调用返回出去的Promise实例的resolve方法把临时数组传递进去了；

这里需要注意，就是上面代码的判断条件，我们平时使用Promise.all时，Promise元素resolve的值应避免是对象或函数且拥有then方法

比如，我们的预期是resolve一个带有then方法的对象；

resolve({
    then: () => {console.log('xxxxxx')}
});

但Promise.all并不会达到我们所要预期的结果；Promise.all().then里的回调函数永远不会执行；

看到这里，你可以去猜测一下提问环节中的第三个例子的执行结果了；

可以试着猜想一下，但千万不要复制到控制台执行！！！

提问环节

后续会公布答案和原理 console.log的顺序是什么？为什么？？

new Promise( (resolve,reject) => { 
    console.log('resolve.run'); 
    resolve('test'); 
}).then( (val) => {
    console.log(val)
})

var promise = new Promise( (resolve,reject) => { 
    console.log('resolve.run'); 
    resolve('test'); 
});
setTimeout(() => {
    promise.then( (val) => {
    	console.log(val)
	})
},0)

以下Promise.all的结果是什么？？

var promise = new Promise( (resolve,reject) => { window.resolve = resolve; window.reject = reject })
Promise.all([promise]).then((result) => console.log(result) )
var then = { then: (fn) => { console.log('test...');fn(then) } }
resolve(then)

活动

智算服务

应用商城

合作伙伴

开发者

支持与服务

了解天翼云

JavaScript Promise超详细源码解读

JavaScript Promise超详细源码解读

Promise超详细源码解读

最基础用法

Promise Func

doResolve Func

resolve Func

finale Func

then Func

noop

handle

handle Func

回到immediateFn

重新梳理思维导图

例子1

例子2

例子3

Promise.all实现

提问环节

相关文章

Promise源码

JavaScript 异步函数的 Promisification 处理

手写Promise

探索异步交互：JavaScript AJAX 的全面指南

JavaScript进阶：手写代码挑战(二)

最全面的 JavaScript 基础代码手写指南，读完这篇就够了！

通过现实生活中一个例子来理解 JavaScript Promise

JavaScript 在 Promise.then 方法里返回新的 Promise

JavaScript 里的 Promise Chaining

使用 JavaScript Promise 读取 Github 某用户的数据

作者介绍

最新文章

Promise源码

JavaScript 异步函数的 Promisification 处理

探索异步交互：JavaScript AJAX 的全面指南

JavaScript进阶：手写代码挑战(二)

最全面的 JavaScript 基础代码手写指南，读完这篇就够了！

通过现实生活中一个例子来理解 JavaScript Promise

热门文章

Promise基本概念

探索异步交互：JavaScript AJAX 的全面指南

如何在Vue3中处理异步API调用并更新表单数据（附Demo）

最全面的 JavaScript 基础代码手写指南，读完这篇就够了！

通过现实生活中一个例子来理解 JavaScript Promise

JavaScript 在 Promise.then 方法里返回新的 Promise

热门标签

相关产品

弹性云主机

天翼云电脑（公众版）

对象存储

云硬盘

随机文章

JavaScript 在 Promise.then 方法里返回新的 Promise

JavaScript 异步函数的 Promisification 处理

如何在Vue3中处理异步API调用并更新表单数据（附Demo）

最全面的 JavaScript 基础代码手写指南，读完这篇就够了！

Promise基本概念

JavaScript进阶：手写代码挑战(二)