Przekaż tablicę Deferreds do $ .when ()

Oto wymyślony przykład tego, co się dzieje: http://jsfiddle.net/adamjford/YNGcm/20/

HTML:

<a href="#">Click me!</a>
<div></div>

JavaScript:

function getSomeDeferredStuff() {
    var deferreds = [];

    var i = 1;
    for (i = 1; i <= 10; i++) {
        var count = i;

        deferreds.push(
        $.post('/echo/html/', {
            html: "<p>Task #" + count + " complete.",
            delay: count
        }).success(function(data) {
            $("div").append(data);
        }));
    }

    return deferreds;
}

$(function() {
    $("a").click(function() {
        var deferreds = getSomeDeferredStuff();

        $.when(deferreds).done(function() {
            $("div").append("<p>All done!</p>");
        });
    });
});

Chcę „Wszystko gotowe!” pojawiać się po zakończeniu wszystkich odroczonych zadań, ale $.when()wydaje się, że nie wie, jak obsługiwać tablicę Odroczonych obiektów. „Wszystko gotowe!” dzieje się najpierw, ponieważ tablica nie jest obiektem odroczonym, więc jQuery idzie do przodu i zakłada, że ​​właśnie zostało zrobione.

Wiem, że można przekazać obiekty do funkcji jak, $.when(deferred1, deferred2, ..., deferredX)ale nie wiadomo, ile obiektów Odroczonych będzie w trakcie wykonywania w rzeczywistym problemie, który próbuję rozwiązać.

Aby przekazać tablicę wartości do dowolnej funkcji, która normalnie oczekuje, że będą to osobne parametry, użyj Function.prototype.apply, więc w tym przypadku potrzebujesz:

$.when.apply($, my_array).then( ___ );

Zobacz http://jsfiddle.net/YNGcm/21/

W ES6 możesz zamiast tego użyć ... operatora rozkładania :

$.when(...my_array).then( ___ );

W obu przypadkach, ponieważ jest mało prawdopodobne, abyś wiedział z góry, ile parametrów formalnych .thenbędzie wymagał moduł obsługi, ten moduł obsługi musiałby przetworzyć argumentstablicę, aby pobrać wynik każdej obietnicy.

Powyższe obejścia (dzięki!) Nie rozwiązują poprawnie problemu odzyskania obiektów dostarczonych do metody odroczonej, resolve()ponieważ jQuery wywołuje done()i fail()wywołania zwrotne z indywidualnymi parametrami, a nie tablicą. Oznacza to, że musimy użyć argumentspseudo-tablicy, aby wszystkie rozstrzygnięte / odrzucone obiekty zostały zwrócone przez tablicę odroczonych, co jest brzydkie:

$.when.apply($,deferreds).then(function() {
     var objects=arguments; // The array of resolved objects as a pseudo-array
     ...
};

Ponieważ przeszliśmy przez szereg odroczonych, byłoby miło odzyskać tablicę wyników. Byłoby również miło odzyskać rzeczywistą tablicę zamiast pseudo-tablicy, abyśmy mogli użyć metod takich jak Array.sort().

Oto rozwiązanie zainspirowane metodą when.js , when.all()która rozwiązuje te problemy:

// Put somewhere in your scripting environment
if (typeof jQuery.when.all === 'undefined') {
    jQuery.when.all = function (deferreds) {
        return $.Deferred(function (def) {
            $.when.apply(jQuery, deferreds).then(
                function () {
                    def.resolveWith(this, [Array.prototype.slice.call(arguments)]);
                },
                function () {
                    def.rejectWith(this, [Array.prototype.slice.call(arguments)]);
                });
        });
    }
}

Teraz możesz po prostu przekazać tablicę odroczonych / obietnic i odzyskać tablicę rozstrzygniętych / odrzuconych obiektów w swoim wywołaniu zwrotnym:

$.when.all(deferreds).then(function(objects) {
    console.log("Resolved objects:", objects);
});

Możesz zastosować whenmetodę do swojej tablicy:

var arr = [ /* Deferred objects */ ];

$.when.apply($, arr);

Jak pracujesz z tablicą jQuery Deferreds?

Podczas wywoływania wielu równoległych wywołań AJAX masz dwie opcje obsługi odpowiednich odpowiedzi.

1. Użyj synchronicznego połączenia AJAX / jeden po drugim / niezalecane
2. Użyj Promises'tablicy i $.whenakceptuje promises, a jej wywołanie zwrotne .donejest wywoływane, gdy wszystkie promises są zwracane z odpowiednimi odpowiedziami.

Przykład

function ajaxRequest(capitalCity) {
   return $.ajax({
        url: 'https://restcountries.eu/rest/v1/capital/'+capitalCity,
        success: function(response) {
        },
        error: function(response) {
          console.log("Error")
        }
    });
}
$(function(){
   var capitalCities = ['Delhi', 'Beijing', 'Washington', 'Tokyo', 'London'];
   $('#capitals').text(capitalCities);

   function getCountryCapitals(){ //do multiple parallel ajax requests
      var promises = [];   
      for(var i=0,l=capitalCities.length; i<l; i++){
            var promise = ajaxRequest(capitalCities[i]);
            promises.push(promise);
      }
  
      $.when.apply($, promises)
        .done(fillCountryCapitals);
   }
  
   function fillCountryCapitals(){
        var countries = [];
        var responses = arguments;
        for(i in responses){
            console.dir(responses[i]);
            countries.push(responses[i][0][0].nativeName)
        }  
        $('#countries').text(countries);
   }
  
   getCountryCapitals()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <h4>Capital Cities : </h4> <span id="capitals"></span>
  <h4>Respective Country's Native Names : </h4> <span id="countries"></span>
</div>

Jako prostą alternatywę, która nie wymaga $.when.applyani array, możesz użyć następującego wzorca do wygenerowania pojedynczej obietnicy dla wielu równoległych obietnic:

promise = $.when(promise, anotherPromise);

na przykład

function GetSomeDeferredStuff() {
    // Start with an empty resolved promise (or undefined does the same!)
    var promise;
    var i = 1;
    for (i = 1; i <= 5; i++) {
        var count = i;

        promise = $.when(promise,
        $.ajax({
            type: "POST",
            url: '/echo/html/',
            data: {
                html: "<p>Task #" + count + " complete.",
                delay: count / 2
            },
            success: function (data) {
                $("div").append(data);
            }
        }));
    }
    return promise;
}

$(function () {
    $("a").click(function () {
        var promise = GetSomeDeferredStuff();
        promise.then(function () {
            $("div").append("<p>All done!</p>");
        });
    });
});

Uwagi:

• Zrozumiałem to po tym, jak zobaczyłem czyjeś obietnice po kolei, używając promise = promise.then(newpromise)
• Minusem jest to, że tworzy dodatkowe obietnice za kulisami, a wszelkie parametry przekazywane na końcu nie są bardzo przydatne (ponieważ są zagnieżdżone w dodatkowych obiektach). To, czego chcesz, jest jednak krótkie i proste.
• Plusem jest to, że nie wymaga tablicy ani zarządzania tablicą.

Chcę zaproponować inny przy użyciu $ .each:

1. Możemy zadeklarować funkcję ajax w następujący sposób:

   function ajaxFn(someData) {
       this.someData = someData;
       var that = this;
       return function () {
           var promise = $.Deferred();
           $.ajax({
               method: "POST",
               url: "url",
               data: that.someData,
               success: function(data) {
                   promise.resolve(data);
               },
               error: function(data) {
                   promise.reject(data);
               }
           })
           return promise;
       }
   }

2. Część kodu, w której tworzymy tablicę funkcji za pomocą ajax do wysyłania:

   var arrayOfFn = [];
   for (var i = 0; i < someDataArray.length; i++) {
       var ajaxFnForArray = new ajaxFn(someDataArray[i]);
       arrayOfFn.push(ajaxFnForArray);
   }

3. I wywoływanie funkcji z wysyłaniem ajax:

   $.when(
       $.each(arrayOfFn, function(index, value) {
           value.call()
       })
   ).then(function() {
           alert("Cheer!");
       }
   )

Jeśli dokonujesz transpozycji i masz dostęp do ES6, możesz użyć składni spreadu, która konkretnie stosuje każdy iterowalny element obiektu jako dyskretny argument, dokładnie tak, jak tego $.when()potrzebuje.

$.when(...deferreds).done(() => {
    // do stuff
});

MDN Link - Składnia spreadu

Jeśli używasz angularJS lub jakiegoś wariantu biblioteki obietnic Q, masz .all()metodę, która rozwiązuje dokładnie ten problem.

var savePromises = [];
angular.forEach(models, function(model){
  savePromises.push(
    model.saveToServer()
  )
});

$q.all(savePromises).then(
  function success(results){...},
  function failed(results){...}
);

zobacz pełne API:

https://github.com/kriskowal/q/wiki/API-Reference#promiseall

https://docs.angularjs.org/api/ng/service/$q

Miałem bardzo podobny przypadek, w którym publikowałem w każdej pętli, a następnie ustawiałem znaczniki HTML w niektórych polach na podstawie liczb otrzymanych z ajax. Następnie musiałem wykonać sumę (teraz zaktualizowanych) wartości tych pól i umieścić je w polu sumarycznym.

Problem polegał na tym, że próbowałem zsumować wszystkie liczby, ale nie otrzymałem jeszcze danych z wywołań asynchronicznych wywołań ajax. Musiałem ukończyć tę funkcjonalność w kilku funkcjach, aby móc ponownie użyć kodu. Moja zewnętrzna funkcja czeka na dane, zanim pójdę i zrobię coś z całkowicie zaktualizowanym DOM.

    // 1st
    function Outer() {
        var deferreds = GetAllData();

        $.when.apply($, deferreds).done(function () {
            // now you can do whatever you want with the updated page
        });
    }

    // 2nd
    function GetAllData() {
        var deferreds = [];
        $('.calculatedField').each(function (data) {
            deferreds.push(GetIndividualData($(this)));
        });
        return deferreds;
    }

    // 3rd
    function GetIndividualData(item) {
        var def = new $.Deferred();
        $.post('@Url.Action("GetData")', function (data) {
            item.html(data.valueFromAjax);
            def.resolve(data);
        });
        return def;
    }