Comment puis-je exécuter trois appels HTTP asynchrones de manière séquentielle à l'aide de jQuery Promises ?

Chaînage d'appels asynchrones avec les promesses jQuery

La programmation asynchrone en JavaScript permet au code de s'exécuter sans bloquer l'interface utilisateur. Pour y parvenir, les promesses sont souvent utilisées pour gérer le flux de données et garantir que les tâches sont exécutées dans un ordre spécifique.

Dans le scénario donné, vous souhaitez effectuer trois appels HTTP asynchrones en séquence. Vous avez fourni une solution partielle impliquant deux fonctions avec des promesses différées. Pour l'étendre à trois fonctions, approfondissons le concept de base.

Dans chaque fonction qui initie une requête asynchrone, renvoyez l'objet jqXHR renvoyé par $.ajax(). Ces objets jqXHR sont compatibles avec Promise, ce qui signifie qu'ils peuvent être facilement chaînés à l'aide de .then(), .done(), .fail() ou .always().

Dans ce cas, .then( ) est le plus adapté car il permet de connecter les trois appels et de transmettre des données de l’un à l’autre. L'exemple de code suivant illustre la solution complète :

<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>

Les arguments data, textStatus et jqXHR sont transmis à chaque fonction suivante à partir de l'appel $.ajax() de l'appel précédent. Cela vous permet de transmettre des données de first() à second() et de second() à Third(), garantissant ainsi que les appels sont exécutés de manière synchrone et que les données circulent de manière transparente entre eux.

Vous pouvez également utiliser une fonction d'assistance comme $.when('foo') pour livrer une promesse tenue à la place de $.ajax(...) pendant les tests ou pendant le développement de votre solution.

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!