Comment enchaîner les appels ajax en utilisant jquery

Note: à partir de jquery 1.8, Vous pouvez utiliser .then au lieu de .pipe . La fonction .then renvoie maintenant une nouvelle promesse et .pipe est dépréciée car elle n'est plus nécessaire. Voir promesses spec pour plus d'informations sur les promesses, et les q.js pour un nettoyeur bibliothèque de javascript promesses sans jquery dépendance.

countries.reduce(function(l, r){
  return l.then(function(){return getData(r)});
}, $.Deferred().resolve());

et si vous aimez utiliser Q. js:

//create a closure for each call
function getCountry(c){return function(){return getData(c)};}
//fire the closures one by one
//note: in Q, when(p1,f1) is the static version of p1.then(f1)
countries.map(getCountry).reduce(Q.when, Q());

réponse originale:

encore un autre tuyau; pas pour les cœurs faibles, mais un peu plus compact:

countries.reduce(function(l, r){
  return l.pipe(function(){return getData(r)});
}, $.Deferred().resolve());

réduire la documentation est probablement le meilleur endroit pour commencer à comprendre comment le code ci-dessus fonctionne. Fondamentalement, il faut deux arguments, un callback et une valeur initiale.

le callback est appliqué itérativement sur tous les éléments du tableau, où son premier argument est nourri le résultat de l'itération précédente, et le deuxième argument est l'élément courant. Le truc ici est que le getData() renvoie un jQuery deferred promise , et le tuyau fait en sorte qu'avant que le getData soit appelé sur l'élément courant le getData de l'élément précédent soit terminé.

le deuxième argument $.Deferred().resolve() est un idiome pour une valeur différée résolue. Il est nourri à la première itération de la l'exécution de callback, et s'assure que le getData sur le premier élément est immédiatement appelé.

Je ne sais pas exactement pourquoi vous voulez faire cela, mais gardez une liste de toutes les URLs que vous devez demander, et ne demandez pas la prochaine Jusqu'à ce que votre fonction success soit appelée. Par exemple, success fera des appels supplémentaires conditionnels à deferred .

je sais que je suis en retard pour ça, mais je crois que votre code original est plutôt bien mais a deux (peut-être trois) problèmes.

votre getData(country) est appelé immédiatement à cause de la façon dont vous avez codé le paramètre de votre pipe. La façon dont vous l'avez, getData() s'exécute immédiatement et le résultat (la promesse de l'ajax, mais la requête http commence immédiatement) est passé comme paramètre à pipe() . Donc au lieu de passer une fonction de rappel, vous passez un objet - ce qui fait que la nouvelle conduite reportée à être immédiatement résolu.

je pense qu'elle doit être

deferred.pipe(function () { return getData(country); });

maintenant c'est une fonction de rappel qui sera appelée quand le parent de la pipe a été résolu. Le codage de cette façon soulèvera le deuxième problème. Aucun des getData () s NE s'exécute tant que le fichier maître différé n'est pas résolu.

le troisième problème potentiel pourrait être que puisque tous vos tuyaux seraient attachés à la maître différé, vous n'avez pas vraiment de chaîne et je me demande si elle pourrait tous les exécuter en même temps de toute façon. Les docs disent que les callbacks sont exécutés dans l'ordre, mais puisque votre callback renvoie une promesse et exécute async, ils pourraient tous être exécutés un peu en parallèle.

donc, je pense que vous avez besoin de quelque chose comme ça

var countries = ["US", "CA", "MX"];
var deferred = $.Deferred();
var promise = deferred.promise();

$.each(countries, function(index, country) {
    promise = promise.pipe(function () { return getData(country); });
});

deferred.resolve();

mise à jour: reportée.la pipe est obsolète

c'est beaucoup de code pour quelque chose qui est déjà documenté dans l'API jQuery. voir http://api.jquery.com/deferred.pipe /

vous pouvez juste les Piper jusqu'à ce que les 100 sont faites.

ou, j'ai écrit quelque chose pour faire N appels, et résoudre une seule fonction avec les données de tous les appels qui ont été faits. Remarque: il renvoie les données et non l'objet super XHR. https://gist.github.com/1219564

j'ai eu du succès avec les files d'attente jQuery.

$(function(){
    $.each(countries, function(i,country){
      $('body').queue(function() {
        getData(country);
      });
    });
});

var getData = function(country){
  $.ajax({
    url : 'ajax.jsp',
    data : { country : country },
    type : 'post',
    success : function() {                          
      // Que up next ajax call
      $('body').dequeue();
    },
    error : function(){
      $('body').clearQueue();
    }
  });
};