Heim > Web-Frontend > js-Tutorial > Hauptteil

Analyse des Quellcodes von es6-promise

不言
Freigeben: 2019-03-23 10:03:18
nach vorne
2838 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Analyse des es6-Promise-Quellcodes. Ich hoffe, dass er für Freunde hilfreich ist.

Hauptlogik:

Im Wesentlichen ist es immer noch dasselbe wie die Rückruffunktion.
Die Unterscheidung zwischen asynchron und synchron wird durch die Beurteilung von _Abonnenten vervollständigt.
Vervollständigen Sie den Ablauf der Then-Kette durch „Resolve“, „Reject“ –> > Synchronisationsfunktionsablauf: Konstruktor -> Veröffentlichung -> >

Hauptfunktionsanalyse


1. Konstruktor

Funktion: Auflösung und Ablehnung an Resolver binden-

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();
    }
  }
Nach dem Login kopieren

2 dann

Funktion: Rückruf setzen Die Funktion ist an _subscribers gebunden und schließlich sind im Wesentlichen syntaktischer Zucker für then

Der Parameter von _subscribers ist ein Array, [0] ist sein untergeordnetes Element, das an das übergeordnete Element der nächsten then-Kette gebunden ist und zum rekursiven Veröffentlichen verwendet wird Der zweite ist der Resolve-Callback, der dritte ist der Reject-Callback.

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;
}
Nach dem Login kopieren

3 Publish

-Funktionen: Resolve, das Auslösen von Reject ruft Publish auf, Publish ruft weiterhin auf invokeCallback und geben Sie den Wert zurück Rufen Sie weiterhin „resolve“ und „reject“ auf, um eine Rekursion zu bilden und den Ablauf der then-Kette zu vervollständigen

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;
}
Nach dem Login kopieren
Tipp:

finally callback hat keine Rückgabeparameter, basierend auf

return promise.then(value => constructor.resolve(callback()).then(() => value),
                         reason => constructor.resolve(callback()).then(() => { throw reason; }));
Nach dem Login kopieren
Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Video-Tutorial
auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonAnalyse des Quellcodes von es6-promise. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage