es6-promise源码的示例分析-创新互联

这篇文章给大家分享的是有关es6-promise源码的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

10年积累的成都网站建设、成都做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有海湖新免费网站建设让你可以放心的选择与我们合作。

主要逻辑:

本质上还是回调函数那一套。
通过_subscribers的判断完成异步和同步的区分。
通过 resolve，reject -> publish -> invokeCallback -> resolve，reject的递归和下一条then的parent是上一条的child来完成then链的流转

同步情况下函数流转： constructor -> resolver -> publish -> then -> invokeCallback
异步情况下函数流转： constructor -> then -> resolver -> publish -> invokeCallback

主要函数解析

1、constructor
作用：把resolve，reject绑定到 resolver上-

constructor(resolver) {
    this[PROMISE_ID] = nextId();
    this._result = this._state = undefined;
    this._subscribers = [];
    <!-- 判断resolver是不是一个空对象 -->
    if (noop !== resolver) {
      typeof resolver !== 'function' && needsResolver();
      <!-- 把resolve，reject绑定到 resolver上-->
      this instanceof Promise ? initializePromise(this, resolver) : needsNew();
    }
  }

2 then
作用：把回调函数绑定在_subscribers上，catch和finally本质是then的语法糖
_subscribers的参数是一个数组，[0]是他的child，绑定下一个then链的parent，用于publish递归调用，第二个是resolve 回调，第三个是reject回调

export default function then(onFulfillment, onRejection) {
  const parent = this;
  <!-- 用于then链的返回值，下一条then就是当前parent的child -->
  const child = new this.constructor(noop);

  if (child[PROMISE_ID] === undefined) {
    makePromise(child);
  }

  const { _state } = parent;
 <!-- 判断_state的状态，是不是PENDING -->
  if (_state) {
    const callback = arguments[_state - 1];
    asap(() => invokeCallback(_state, child, callback, parent._result));
  } else {
    subscribe(parent, child, onFulfillment, onRejection);
  }

  return child;
}

3 publish
作用： resolve，reject的触发会调用publish，publish继续调用invokeCallback，通过返回值继续调用resolve，reject，形成一个递归，完成then链的流转

function publish(promise) {
  let subscribers = promise._subscribers;
  let settled = promise._state;

  if (subscribers.length === 0) { return; }

  let child, callback, detail = promise._result;

  for (let i = 0; i < subscribers.length; i += 3) {
    child = subscribers[i];
    callback = subscribers[i + settled];

    if (child) {
      invokeCallback(settled, child, callback, detail);
    } else {
      callback(detail);
    }
  }

  promise._subscribers.length = 0;
}

tip:
finally的callback是没有返回参数的，基于

return promise.then(value => constructor.resolve(callback()).then(() => value),
                         reason => constructor.resolve(callback()).then(() => { throw reason; }));

感谢各位的阅读！关于es6-promise源码的示例分析就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

分享名称：es6-promise源码的示例分析-创新互联
链接URL：https://www.cdcxhl.com/article40/dgopho.html

成都网站建设公司_创新互联，为您提供标签优化、Google、网站收录、用户体验、品牌网站设计、网站导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容