Jak łączyć połączenia ajax za pomocą jquery

Uwaga: od jquery 1.8 możesz używać .then zamiast .pipe. Funkcja .then zwraca teraz nową obietnicę i .pipe jest przestarzała, ponieważ nie jest już potrzebna. Zobacz promises specaby uzyskać więcej informacji na temat promises, oraz q.js aby uzyskać czystszą bibliotekę obietnic javascript bez zależności od jquery.

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

I jeśli lubisz używać 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());

oryginalna odpowiedź:

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

Reduce documentation jest prawdopodobnie najlepszym miejscem, aby zacząć rozumieć, jak działa powyższy kod. Zasadniczo wymaga dwóch argumentów, wywołania zwrotnego i wartości początkowej.

Wywołanie zwrotne jest stosowane iteracyjnie do wszystkich elementów tablicy, gdzie pierwszy argument jest podawany jako wynik poprzedniej iteracji, a drugi jako bieżący element. Sztuczka polega na tym, że getData() zwraca jQuery deferred promise , a rura upewnia się, że przed wywołaniem getData na bieżącym elemencie zostanie zakończona funkcja getData poprzedniego elementu.

Drugi argument $.Deferred().resolve() jest idiomem dla rozdzielonej wartości odroczonej. Jest on podawany do pierwszej iteracji wywołania zwrotnego i upewnia się, że getData na pierwszym elemencie jest natychmiast wywołana.

Nie jestem do końca pewien, dlaczego chcesz to zrobić, ale zachowaj listę wszystkich adresów URL, o które musisz poprosić, i nie żądaj następnego, dopóki nie zostanie wywołana funkcja success. Tj. success warunkowo wykona dodatkowe wywołania do deferred.

Wiem, że jestem na to spóźniony, ale wierzę, że twój oryginalny kod jest w większości w porządku, ale ma dwa (może trzy) problemy.

Twój {[2] } jest wywoływany natychmiast ze względu na sposób zakodowania parametru rury. Sposób, w jaki to masz, getData() jest wykonywany natychmiast, a wynik (obietnica ajax, ale żądanie http rozpoczyna się natychmiast) jest przekazywany jako parametr do pipe(). Więc zamiast przekazać funkcję zwrotną, przekazujesz obiekt-co powoduje, że nowa rura będzie natychmiast rozwiązany.

Myślę, że to musi być

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

Teraz jest to funkcja zwrotna, która zostanie wywołana, gdy zostanie rozwiązany rodzic rury. Kodowanie go w ten sposób spowoduje drugi problem. Żadna z funkcji getData()nie zostanie wykonana, dopóki nie zostanie rozwiązany master deferred.

Potencjalnym trzecim problemem może być to, że skoro wszystkie twoje rury byłyby przymocowane do mistrza, to tak naprawdę nie masz łańcucha i zastanawiam się, czy mógłby je wszystkie wykonać w w każdym razie o tej samej porze. Dokumenty mówią, że wywołania zwrotne są wykonywane w kolejności, ale ponieważ oddzwanianie zwraca obietnicę i działa asynchronicznie, mogą one nadal wykonywać nieco równolegle.

Więc myślę, że potrzebujesz czegoś takiego

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

Update: odroczone.pipe is deprecated

Jest to dużo kodu na coś, co jest już udokumentowane w jQuery API. zobacz http://api.jquery.com/deferred.pipe/

Możesz je po prostu orurować, dopóki wszystkie 100 nie zostaną wykonane.

Lub, napisałem coś, aby wykonać N wywołań, i rozwiązać jedną funkcję z danymi wszystkich połączeń, które zostały wykonane. Notatka: zwraca dane, a nie obiekt super XHR. https://gist.github.com/1219564

Odniosłem sukces z kolejkami 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();
    }
  });
};