Verketten von drei asynchronen Aufrufen mit jQuery-Versprechen

Bei der asynchronen Programmierung ist es üblich, mehrere Aufrufe an eine API oder einen Server nacheinander durchzuführen. Um diese Aufrufe effizient abzuwickeln, ist es wünschenswert, sie miteinander zu verketten und sicherzustellen, dass jeder Aufruf abgeschlossen ist, bevor der nächste ausgeführt wird. Mit jQuery-Versprechen kann dieser Verkettungsprozess problemlos durchgeführt werden.

Stellen Sie sich das folgende Szenario vor, in dem drei HTTP-Aufrufe nacheinander durchgeführt werden müssen und Daten von einem Aufruf an den anderen übergeben werden müssen:

function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

function main() {
    first().then(second).then(third);
}

In diesem Beispiel besteht die Absicht darin, einen ersten Anruf zu tätigen, auf dessen Abschluss zu warten, dann einen zweiten Anruf mit dem Ergebnis des ersten Anrufs zu tätigen und schließlich einen dritten Anruf mit dem Ergebnis zu tätigen zweiter Anruf. Dieser Code funktioniert jedoch nicht wie erwartet. Um diese Aufrufe korrekt zu verketten, ist die ordnungsgemäße Verwendung von jQuery-Versprechen erforderlich.

function first() {
    var deferred = $.Deferred();
    $.ajax({
        "success": function(resp) {
            deferred.resolve(resp);
        },
    });
    return deferred.promise();
}

function second(foo) {
    $.ajax({
        "success": function(resp) {
            // do something with the resp
        },
        "error": function(resp) {
            // handle the error
        },
    });
}

first().then(function(foo) {
    second(foo);
});

Dieser Code bietet eine Teillösung, aber die Verkettung für drei Funktionen wird immer noch nicht erreicht. Der Schlüssel zur Verkettung mehrerer Aufrufe liegt in der Rückgabe des von $.ajax() in jeder Funktion zurückgegebenen jqXHR-Objekts. Diese Objekte sind Promise-kompatibel und können mit .then()/.done()/.fail()/.always() verkettet werden.

function first() {
    return $.ajax(...);
}

function second(data, textStatus, jqXHR) {
    return $.ajax(...);
}

function third(data, textStatus, jqXHR) {
    return $.ajax(...);
}

function main() {
    first().then(second).then(third);
}

In diesem überarbeiteten Code stellt das von jedem $.ajax()-Aufruf zurückgegebene jqXHR-Objekt das Versprechen der jeweiligen Funktion dar. Dadurch können die Funktionen sequentiell verkettet werden, wobei die Ausgabe einer Funktion als Eingabe an die nächste übergeben wird.

Die Argumente data, textStatus und jqXHR ergeben sich aus dem $.ajax()-Aufruf in der vorherigen Funktion . Zum Beispiel speist first() second() und second() speist Third() und gibt alle relevanten Daten weiter.

Um diese Verkettung in Aktion zu sehen, eine Live-Demonstration mit $.when('foo' ), um ein erfülltes Versprechen zu liefern, finden Sie unten.