es6-promise ソースコードの分析

この記事の内容は es6-promise のソースコードの解析に関するものであり、一定の参考価値がありますので、困っている方は参考にしていただければ幸いです。

メイン ロジック:

本質的には、依然としてコールバック関数です。
非同期と同期の区別は、_subscribers の判断によって完了します。
resolve、reject ->publish ->invokeCallback ->resolve、reject の再帰によって then チェーンのフローを完了し、次の then の親は前の then の子になります。

同期の場合の関数の流れ:constructor ->resolver ->publish ->gt; then ->invokeCallback

非同期の場合の関数の流れ:constructor ->gt; then ->resolver ->publish -> invokeCallback

メイン関数分析

1. コンストラクター

関数: リゾルバーへのバインド解決と拒否-

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] はその子で、次の then チェーンの親にバインドされています。 2 番目はリゾルブ コールバック、3 番目はリジェクト コールバックです

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 public関数: 解決、リジェクトのトリガーが呼び出します公開すると、公開は引き続き invokeCallback を呼び出し、値を返します。 引き続き、resolve と拒否を呼び出して再帰を形成し、その後のチェーンのフローを完了します。

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; }));

に基づいています。この記事はここで終了しています。その他の興味深いコンテンツについては、PHP 中国語 Web サイトの

JavaScript ビデオ チュートリアル 列に注目してください。

以上がes6-promise ソースコードの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。