Chaîner trois appels asynchrones avec les promesses de jQuery

Dans la programmation asynchrone, il est courant d'effectuer plusieurs appels successifs à une API ou à un serveur. Pour gérer efficacement ces appels, il est souhaitable de les enchaîner, en garantissant que chaque appel est terminé avant que le suivant ne soit exécuté. Avec les promesses de jQuery, ce processus de chaînage peut être réalisé facilement.

Considérez le scénario suivant, dans lequel trois appels HTTP doivent être effectués en séquence et les données doivent être transmises d'un appel à l'autre :

function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

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

Dans cet exemple, l'intention est de passer un premier appel, d'attendre qu'il se termine, puis de passer un deuxième appel en utilisant le résultat du premier appel, et enfin de passer un troisième appel en utilisant le résultat du deuxième appel. Cependant, ce code ne fonctionnera pas comme prévu. Pour enchaîner correctement ces appels, une utilisation appropriée des promesses jQuery est nécessaire.

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

Ce code fournit une solution partielle, mais le chaînage de trois fonctions n'est toujours pas réalisé. La clé pour enchaîner plusieurs appels réside dans le retour de l'objet jqXHR renvoyé par $.ajax() dans chaque fonction. Ces objets sont compatibles avec Promise et peuvent être chaînés à l'aide de .then()/.done()/.fail()/.always().

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

Dans ce code révisé, l'objet jqXHR renvoyé par chaque appel $.ajax() représente la promesse de la fonction respective. Cela permet aux fonctions d'être enchaînées séquentiellement, la sortie d'une fonction étant transmise en entrée à la suivante.

Les arguments data, textStatus et jqXHR proviennent de l'appel $.ajax() dans la fonction précédente. . Par exemple, first() alimente second() et second() alimente troisième(), en transmettant toutes les données pertinentes.

Pour voir ce chaînage en action, une démonstration en direct utilisant $.when('foo' ) pour tenir une promesse est fourni ci-dessous.