Verstehen der Ausführungsreihenfolge in JavaScript-Versprechen

Versprechen in JavaScript bieten ein asynchrones Programmiermodell, bei dem Code ausgeführt wird, sobald ein bestimmtes Ereignis oder Versprechen eintrifft , ist erfüllt. Beim Umgang mit mehreren Versprechen ist es jedoch wichtig, die Ausführungsreihenfolge zu verstehen, um unvorhersehbares Verhalten zu vermeiden.

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

Bei der Ausführung können Sie die folgende Ausgabereihenfolge beobachten:

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

Die Ausführungsreihenfolge verstehen

1. Promises werden asynchron aufgelöst:
   Promises werden unabhängig vom aktuellen Ausführungsthread aufgelöst. 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 Promises erstellen unabhängige Ketten:
   Promises erstellt 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.

Recommendations

Um eine bestimmte Ausführungsreihenfolge sicherzustellen, vermeiden Sie die Erstellung unsynchronisierter Versprechensketten und verlassen Sie sich stattdessen auf die sequentielle Verknüpfung von Versprechen. Geben Sie Versprechen von inneren .then()-Handlern zurück, 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);

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.