promise源码解析

前言

大部分同学对promise，可能还停留在会使用es6的promise，还没有深入学习。我们都知道promise内部通过reslove、reject来判断执行哪个函数，原型上面的then同样的，也有成功回调函数跟失败回调函数。

这篇文章，我们来讲讲promise的源码，从源码来分析，promise的原理。Tip:  阅读源码是枯燥的

 

使用

使用es6的promise常用的方式有两种：
1、使用CDN 引入方式，我们在html中引入es6-promise.js、es6-promise.auto.js这两个js文件，就可以使用了。
2、通过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执行步骤如下：

1、 首先创建Promise
2、 然后设置需要执行的函数
3、 接着设置完成的回调
4、 跟着开始执行函数
5、 最后根据执行结果选择回调