Comment pouvez-vous enchaîner trois appels asynchrones dans jQuery à l'aide de Promises, en transmettant des données d'un appel au suivant ?

Enchaînement de trois appels asynchrones avec des promesses jQuery

Dans cette question, nous explorons un scénario dans lequel vous avez trois requêtes HTTP asynchrones à effectuer dans un de manière synchrone, et vous devez transmettre les données d'un appel à l'autre.

Approche initiale :

Comme mentionné dans la question, vous avez tenté d'utiliser des différés pour le deux premières fonctions. C'était un bon début, mais cela ne couvrait que le cas de deux fonctions. L'étendre à trois fonctions nécessite une approche légèrement différente.

Chaînage avec des objets JqXHR :

La clé pour chaîner plusieurs appels asynchrones est de renvoyer 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 mis à jour :

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 mis à jour, la fonction first() renvoie l'objet jqXHR à partir de son appel AJAX, qui est ensuite passé en argument à la fonction second(). La fonction second(), à son tour, renvoie son objet jqXHR, qui est transmis à la fonction troisième().

Transmission de données entre fonctions :

Les données des arguments , textStatus et jqXHR proviennent de l'appel $.ajax() dans la fonction précédente. Cela signifie que first() alimente second() et second() alimente troisième(). Par conséquent, vous pouvez utiliser ces arguments pour transmettre des données d'une fonction à la suivante.

Démo :

Le code ci-dessous démontre l'enchaînement de trois appels asynchrones à l'aide des promesses jQuery . Il utilise $.when('foo') pour livrer une promesse tenue à la place de $.ajax(...).

function first() {
   return $.when('foo');
}

function second(data) {
   return $.when('bar' + data);
}

function third(data) {
   return $.when('baz' + data);
}

first().then(second).then(third)
  .done(function(data) {
     console.log(data); // Logs "bazbarfoo"
  });

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!