Promise源码阅读之ES6 Extensions API

前言

本次阅读的Promise是基于Promise A+规范的，对于ES6 Promises规范中有些API需要提供另外的支持，即ex6-extensions.js文件中的逻辑处理。本篇文章就将Promise库实现的ES6 Promises规范中定义的相关API。

实际上就是下面几个API：

• Promise.resolve()
• Promise.reject()
• Promise.all()
• Promise.race()
• Promise.prototype.catch

具体分析

Promise.resolve

该方法返回一个fulfilled状态的Promise对象

  if (value instanceof Promise) return value;
  // NULL 即valuePromise(null)
  if (value === null) return NULL;
  // 与NULL同理
  if (value === undefined) return UNDEFINED;
  if (value === true) return TRUE;
  if (value === false) return FALSE;
  if (value === 0) return ZERO;
  if (value === '') return EMPTYSTRING;

  if (typeof value === 'object' || typeof value === 'function') {
  // 处理是否存在then函数
  }
  return valuePromise(value);

而valuePromise实际上就是返回一个Promise对象，即：

function valuePromise(value) {
  var p = new Promise(Promise._n);
  // 状态
  p._i = 1;
  p._j = value;
  return p;
}

Promise.resolve()总是返回状态为fulfilled的promise对象

Promise.reject

而对于Promise.reject就是支持创建Promise并调用reject函数，即：

Promise.reject = function (value) {
  return new Promise(function (resolve, reject) {
    reject(value);
  });
};

Promise.all

Promise.all是用于处理非关联的多个请求情况下的首选处理方式，而all方法背后的实现上还是遍历来实现每个Promise相关函数的处理，核心处理逻辑如下：

Promise.all = function() {
  var args = Array.prototype.slice.call(arr);

  return new Promise(function (resolve, reject) {
    if (args.length === 0) return resolve([]);
    var remaining = args.length;
    function res(i, val) {
      // 判断val是否是对象或函数，进行相关处理
      args[i] = val;
      // 只有所有的参数结果都获取到了才会主动触发resolve
      if (--remaining === 0) {
        resolve(args);
      }
    }
    for (var i = 0; i < args.length; i++) {
      res(i, args[i]);
    }
  });
};

上面逻辑中res中有对于val为函数或对象的处理逻辑，而实际上的处理逻辑如下：

if (val && (typeof val === 'object' || typeof val === 'function')) {
        if (val instanceof Promise && val.then === Promise.prototype.then) {
          while (val._i === 3) {
            val = val._j;
          }
          if (val._i === 1) return res(i, val._j);
          if (val._i === 2) reject(val._j);
          // 主要处理状态0和2情况
          val.then(function (val) {
            res(i, val);
          }, reject);
          return;
        } else {
          var then = val.then;
          if (typeof then === 'function') {
            var p = new Promise(then.bind(val));
            p.then(function (val) {
              res(i, val);
            }, reject);
            return;
          }
        }
      }

上面的处理逻辑总结如下：

• 首先判断val是否是对象或函数
• 如果val是对象并且存在then函数

• 如果当前Promise状态为3即val是另一个Promise对象，则会执行逻辑死循环一直等待其状态改变
• 当前Promise状态修改为0、1或2，即表示执行完毕，1则是成功，2则是发生异常，0表示初始化状态
• 再对val表示的Promise对象的执行结果进行判断重复性的判断，直至val不存在then函数

• 如果val不是对象或者val是对象但不存在then函数，则会进行另外的判断

• 判断val是否存在then函数，是则创建Promise，则调用bind函数执行当前then的this值，作为新的回调处理

Promise.race

Promise.race = function (values) {
  return new Promise(function (resolve, reject) {
    values.forEach(function(value){
      // 只要有一个value执行完就会触发resolve
      Promise.resolve(value).then(resolve, reject);
    });
  });
};

Promise.catch

catch方法实际上就是then(null, reject)，即：

Promise.prototype['catch'] = function (onRejected) {
  return this.then(null, onRejected);
};

总结

整体介绍了promise对于ES6 Promises API的实现支持，实际上这里想要提及下promise中使用的asap，asap实际上底层使用的还是浏览器提供的异步操作API。

扫描二维码关注公众号，回复： 5177794 查看本文章

对于Node.js环境，使用setImmediate或process.nextTick来实现callback执行
对于浏览器环境，使用MutationObserver 或 setTimeout、setIntervel来实现callback执行。