Heim > Web-Frontend > js-Tutorial > Hauptteil

Wann werden JavaScript Promise .then()-Handler im Verhältnis zueinander ausgeführt?

Susan Sarandon
Freigeben: 2024-10-25 08:19:28
Original
394 Leute haben es durchsucht

When do JavaScript Promise .then() Handlers Execute in Relation to Each Other?

Verstehen der Ausführungsreihenfolge in JavaScript-Versprechen

Versprechen in JavaScript bieten ein asynchrones Programmiermodell, bei dem Code einmal bei einem bestimmten Ereignis oder Versprechen ausgeführt wird , ist erfüllt. Beim Umgang mit mehreren Versprechen ist es jedoch wichtig, die Reihenfolge der Ausführung zu verstehen, um unvorhersehbares Verhalten zu vermeiden.

Beachten Sie den folgenden Codeausschnitt:

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

Bei der Ausführung werden Sie möglicherweise Folgendes beobachten Reihenfolge der Ausgabe:

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

Verstehen der Ausführungsreihenfolge

  1. Versprechen werden asynchron aufgelöst:
    Versprechen werden unabhängig davon aufgelöst der aktuelle Thread der Ausführung. Dies bedeutet, dass die .then()-Handler asynchron aufgerufen werden, nachdem der aktuelle Thread beendet ist.
  2. Promises in einer Warteschlange ausführen:
    .then()-Handler sind so geplant, dass sie nach dem vorhergehenden Thread ausgeführt werden Handler vervollständigt. Sie stehen im Wesentlichen in der Warteschlange, weshalb Sie 1, 2 „A“ und 3 „B“ in dieser Reihenfolge gedruckt sehen.
  3. Innere Versprechen erstellen unabhängige Ketten:
    Erstellte Versprechen Erstellen Sie innerhalb verschachtelter .then()-Handler wie Promise.resolve('C') und Promise.resolve('D') neue, unabhängige Versprechenketten. Diese inneren Ketten sind nicht von Natur aus mit der äußeren Kette synchronisiert.
  4. Die Ausführungsreihenfolge ist nicht deterministisch:
    Die Ausführungsreihenfolge für diese unabhängigen Ketten ist nicht garantiert. In diesem Fall führt die Promise-Engine die .then()-Handler in den Zeilen 5 und 12 vor denen in den Zeilen 6 und 7 aus.

Empfehlungen

Um eine bestimmte Ausführungsreihenfolge sicherzustellen, vermeiden Sie die Erstellung unsynchronisierter Versprechensketten und verlassen Sie sich stattdessen auf die sequentielle Verknüpfung von Versprechen. Rückgabeversprechen von inneren .then()-Handlern, um sie mit dem übergeordneten Versprechen zu verketten, wie unten gezeigt:

Promise.resolve('A').then(function (a) {
    console.log(2, a);
    return 'B';
}).then(function (a) {
    var p = Promise.resolve('C').then(function (a) {
        console.log(7, a);
    }).then(function (a) {
        console.log(8, a);
    });
    console.log(3, a);
    return p; // Link the inner promise to the parent chain
}).then(function (a) {
    var p = Promise.resolve('D').then(function (a) {
        console.log(9, a);
    }).then(function (a) {
        console.log(10, a);
    });
    console.log(4, a);
    return p; // Link the inner promise to the parent chain
}).then(function (a) {
    console.log(5, a);
});

console.log(1);

setTimeout(function () {
    console.log(6)
}, 0);
Nach dem Login kopieren

Mit diesem Ansatz wird die Ausführungsreihenfolge vollständig deterministisch: 1, 2 „A“, 3 „ B“, 7 „C“, 8 undefiniert, 4 undefiniert, 9 „D“, 10 undefiniert, 5 undefiniert und 6.

Das obige ist der detaillierte Inhalt vonWann werden JavaScript Promise .then()-Handler im Verhältnis zueinander ausgeführt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!