Warum entspricht die Reihenfolge der Promise-Ausführung nicht den Erwartungen in JavaScript?

Wie ist die Ausführungsreihenfolge in JavaScript-Versprechen?

Problem:

Der folgende Ausschnitt demonstriert die Verwendung von JavaScript verspricht, und die Reihenfolge der Ausführung ist faszinierend.

<code class="javascript">Promise.resolve('A')
  .then(function(a){console.log(2, a); return 'B';})
  .then(function(a){
     Promise.resolve('C')
       .then(function(a){console.log(7, a);})
       .then(function(a){console.log(8, a);});
     console.log(3, a);
     return a;})
  .then(function(a){
     Promise.resolve('D')
       .then(function(a){console.log(9, a);})
       .then(function(a){console.log(10, a);});
     console.log(4, a);})
  .then(function(a){
     console.log(5, a);});
console.log(1);
setTimeout(function(){console.log(6)},0);</code>

Das Ergebnis zeigt, dass die Reihenfolge der Ausführung lautet:

1
2 "A"
3 "B"
7 "C"
4 "B"
8 undefined
9 "D"
5 undefined
10 undefined
6

Es stellt sich die Frage, warum die Ausführungsreihenfolge nicht 1, 2 ist , 3, 4..., und wie unterscheidet sich die Erwartung von 1, 2, 3, 4... vom Ergebnis?

Antwort:

Kommentare:

Das Ausführen von Versprechen innerhalb eines .then()-Handlers, ohne sie vom .then()-Rückruf zurückzugeben, erstellt eine neue, nicht angehängte Versprechensequenz, die in keiner Weise mit den übergeordneten Versprechen synchronisiert wird Weg. Dies wird im Allgemeinen als Fehler betrachtet und einige Promise-Engines geben bei Auftreten Warnungen aus, da es sich normalerweise nicht um das beabsichtigte Verhalten handelt. Ein gültiger Anwendungsfall könnte ein „Fire and Forget“-Vorgang sein, bei dem weder Fehler noch Synchronisierung ein Problem darstellen.

Promise.resolve()-Promises innerhalb von .then()-Handlern erstellen neue Promise-Ketten, die unabhängig vom übergeordneten Element ausgeführt werden Kette. Bei tatsächlichen asynchronen Vorgängen wie AJAX-Aufrufen gibt es kein vorhersehbares Verhalten für unabhängige, getrennte Versprechensketten. Der Zeitpunkt der Fertigstellung ist unbestimmt, etwa so, als würden vier AJAX-Aufrufe parallel gestartet, bei denen die Reihenfolge der Fertigstellung unbekannt ist. Im bereitgestellten Code sind alle Vorgänge synchron, was zu einem konsistenten Verhalten führt. Darauf sollte man sich jedoch nicht verlassen, da der Entwurfszweck von Versprechen die asynchrone Ausführung ist.

Zusammenfassung:

1. Alle .then()-Handler werden asynchron aufgerufen, nachdem der aktuelle Ausführungsthread beendet ist. Diese Konsistenz umfasst Versprechen, die synchron aufgelöst werden, wie z. B. Promise.resolve().then(...), um Zeitfehler zu vermeiden.
2. Es gibt keine festgelegte Reihenfolge für setTimeout() im Vergleich zu geplanten .then()-Handlern. Während die verwendete Implementierung einen ausstehenden .then()-Handler vor einem ausstehenden setTimeout() platziert, ermöglicht die Promises/A-Spezifikation die Planung entweder vor oder nach setTimeout().
3. Unabhängige Promise-Ketten haben keine vorhersehbare Ausführung Reihenfolge.
4. Wenn die Ausführungsreihenfolge entscheidend ist, vermeiden Sie die Erstellung von Rennen, die von winzigen Implementierungsdetails abhängig sind. Verknüpfen Sie stattdessen Versprechensketten, um eine bestimmte Reihenfolge zu erzwingen.
5. Vermeiden Sie die Erstellung unabhängiger Versprechensketten innerhalb von .then()-Handlern, es sei denn, es handelt sich um ein „Fire and Forget“-Szenario.

Zeilenweise Analyse:

1. Die anfängliche Promise-Kette wird initiiert und ein .then()-Handler angehängt. Da Promise.resolve() sofort aufgelöst wird, ist die Ausführung des ersten .then()-Handlers nach Abschluss des aktuellen JavaScript-Threads geplant. Nachfolgende .then()-Handler auf der obersten Ebene verketten nach dem ersten und werden erst ausgeführt, nachdem der erste abgeschlossen ist.
2. setTimeout() wird am Ende des Ausführungsthreads ausgeführt und ein Timer geplant.
3. Nach Abschluss der synchronen Ausführung führt die Ereigniswarteschlange die verbleibenden Aufgaben aus.
4. Der in Zeile 1 definierte .then()-Handler wird ausgeführt und „2 „A““ wird protokolliert.
5. Der nachfolgende .then()-Handler wird aufgerufen und eine neue unabhängige Promise-Kette mit einem .then()-Handler erstellt, dessen Ausführung geplant ist, wenn der aktuelle Ausführungsthread beendet ist. Dieser Handler gibt „3 „B““ aus, bevor der .then()-Handler der untergeordneten Kette ausgeführt wird, der „7 „C““ ausgibt.
6. Der in Zeile 12 definierte .then()-Handler wird dann aufgerufen und Wieder wird eine neue Versprechenskette erstellt, die einen .then()-Handler plant. „4 „B““ wird von diesem Handler protokolliert.
7. Der geplante .then()-Handler aus der untergeordneten Kette wird ausgeführt und gibt „8 undefiniert“ aus.
8. Der .then()-Handler Anschließend wird die in Zeile 19 definierte Funktion aufgerufen und eine weitere unabhängige Promise-Kette erstellt, die einen .then()-Handler plant. „5 undefiniert“ wird von diesem Handler ausgegeben.
9. Schließlich wird der in Zeile 15 definierte .then()-Handler aufgerufen und „10 undefiniert“ wird ausgegeben.
10. SetTimeout() wird ausgeführt zuletzt.

Fazit:

Das Fehlen einer bestimmten Reihenfolge in Promise.resolve() verspricht Ausführungen innerhalb von .then()-Handlern sowie der Die Unbestimmtheit der .then()-Handlerplanung im Vergleich zu setTimeout() für verschiedene Engines unterstreicht die Bedeutung der Steuerung der Ausführungsreihenfolge durch Verkettung von Versprechen.

Das obige ist der detaillierte Inhalt vonWarum entspricht die Reihenfolge der Promise-Ausführung nicht den Erwartungen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!