Comment chaîner plusieurs appels asynchrones à l'aide des promesses jQuery ?

Enchaîner trois appels asynchrones avec les promesses jQuery

En programmation asynchrone, il est courant d'effectuer plusieurs appels successifs vers 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 :

<code class="javascript">function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

function main() {
    first().then(second).then(third);
}</code>

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 bonne utilisation des promesses jQuery est nécessaire.

<code class="javascript">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);
});</code>

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().

<code class="javascript">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);
}</code>

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 cet enchaînement en action, une démonstration en direct utilisant $.when('foo' ) pour tenir une promesse tenue est fourni ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!