Chain AJAX calls using jQuery 1.6

[French version below / version française ci‐dessous].

I looked for a way to chain ajax calls in jQuery 1.6 using new Deferred objects. My purpose was to wait for the response a call before sending the next.

Chaining, the old fashionned way

In a old fashionned jQuery way, we have to do something like that :

$.get("example1.php", function(data){
  // Do some stuff here
  // then launch the second call
  $get("example2.php", function(data){
    // Do some stuff here
    // then launch the third call
    $.get("example3.php", function(data){
      // You get the point
    });
  });
});

As you can notice, this code works well for a limited number of chained calls. But if you’d like to chain more calls, you’ll have to handle a lot of imbricated calls rendering the code a real mess. Even worse if you have to handle requests failures.

Chaining with Deferred and pipe()

I did not find an obvious example neither jQuery.com nor anywhere else on the internet. After investigating on how to do that with the new Deferred object in jQuery 1.6, I found a simple solution.

// First ajax call
$.get("example1.php")
  .done(function(data){
    // Do something here
  })
  // Second ajax call that have to wait for 
  // the first response before being launched
  // You can use data received from the first call
  .pipe(function(data){
     // Take care of returning the new deferred object
     return $.get("example2.php");
  })
  .done(function(data){ /*Do something else*/ })
  // Third call : waits for the second response
  .pipe(function(data){
     return $.get("example3.php");
  })
  .done(function(data){ /*Do something else*/ });
  // You can repeat this stuff over and over

If you know a shorter version of this example, let me know : I’m interested !


French version
J’ai cherché comment chaîner des requêtes AJAX avec les objets Deferred de jQuery 1.6 ; le but étant d’attendre la réception de la réponse à une requête avant d’en envoyer une autre.

Enchaîner les appels, la vieille école

Dans un style jQuery vieille école, ça donnerait ça :

$.get("example1.php", function(data){
  // Traitement des données
  // Second appel AJAX
  $get("example2.php", function(data){
    // Traitement des données
    // Troisième appel
    $.get("example3.php", function(data){
      // Vous avez compris l'idée
    });
  });
});

Ce code fonctionne bien pour un petit nombre d’appels à enchainer. Mais dès qu’on veut en enchaîner un certain nombre, on se retrouver avec beaucoup trop d’appels imbriqués qui rendent le code illisible. Le constat est encore pire si on doit gérer les erreurs des requêtes AJAX.

Enchainer les appels avec Deferred et pipe()

Je n’ai pas trouvé un exemple concret ni sur jQuery.com ni ailleurs sur internet. Finalement, après quelques investigations j’ai fini par trouver une solution assez simple

// Premier appel ajax
$.get("example1.php")
  .done(function(data){ /* Do something here */ })
  // Deuxième appel ajax, qui doit attendre la réponse
  // du premier pour pouvoir être lancé.
  // On peut réutiliser les données reçues par l'appel précédent.
  .pipe(function(data){
     // Bien retourner le nouvel objet deferred
     return $.get("example2.php");
  })
  .done(function(data){ /*Do something else*/ })
  // Troisième appel : attend la réponse du 2e
  .pipe(function(data){
     return $.get("example3.php");
  })
  .done(function(data){ /*Do something else*/ });
  // On peut répéter à l'envie.

Peut‐être existe‐t‐il une version plus courte que cette dernière, si vous la connaissez, faites‐la moi parvenir : ça m’intéresse.

Laisser un commentaire