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 二、 而后设置须要执行的函数 三、 接着设置完成的回调 四、 跟着开始执行函数 五、 最后根据执行结果选择回调