Pase una variedad de diferidos a $ .when ()

Aquí hay un ejemplo artificial de lo que está sucediendo: 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>");
        });
    });
});

Quiero "¡Todo listo!" aparecer después de que se hayan completado todas las tareas diferidas, pero $.when()no parece saber cómo manejar una matriz de objetos diferidos. "¡Todo listo!" está sucediendo primero porque la matriz no es un objeto diferido, por lo que jQuery sigue adelante y supone que se acaba de hacer.

Sé que uno podría pasar los objetos a la función, $.when(deferred1, deferred2, ..., deferredX)pero no se sabe cuántos objetos diferidos habrá en la ejecución del problema real que estoy tratando de resolver.

Para pasar una matriz de valores a cualquier función que normalmente espera que sean parámetros separados, use Function.prototype.apply, por lo que en este caso necesita:

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

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

En ES6, puede utilizar el ... operador de propagación en su lugar:

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

En cualquier caso, dado que es poco probable que sepa de antemano cuántos parámetros formales .thenrequerirá el controlador, ese controlador necesitará procesar la argumentsmatriz para recuperar el resultado de cada promesa.

Las soluciones anteriores (gracias!) No abordan adecuadamente el problema de volver a los objetos proporcionados a la del diferida resolve()método porque jQuery llama done()y fail()devoluciones de llamada con los parámetros individuales, no una matriz. Eso significa que tenemos que usar la argumentspseudo-matriz para obtener todos los objetos resueltos / rechazados devueltos por la matriz de diferidos, lo cual es feo:

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

Dado que aprobamos una serie de aplazamientos, sería bueno recuperar una serie de resultados. También sería bueno recuperar una matriz real en lugar de una pseudo-matriz para que podamos usar métodos como Array.sort().

Aquí hay una solución inspirada en el método de when.jswhen.all() que aborda estos problemas:

// 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)]);
                });
        });
    }
}

Ahora puede simplemente pasar una matriz de diferidos / promesas y recuperar una matriz de objetos resueltos / rechazados en su devolución de llamada, de esta manera:

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

Puede aplicar el whenmétodo a su matriz:

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

$.when.apply($, arr);

¿Cómo trabaja con una variedad de jQuery Deferreds?

Al llamar a varias llamadas AJAX paralelas, tiene dos opciones para manejar las respuestas respectivas.

1. Usar llamada AJAX sincrónica / una tras otra / no recomendado
2. Use Promises'array y $.whenque acepte promises y su devolución de llamada .donese llama cuando todos los promises se devuelven correctamente con las respuestas respectivas.

Ejemplo

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>

Como alternativa simple, que no requiere $.when.applyo una array, puede usar el siguiente patrón para generar una sola promesa para múltiples promesas paralelas:

promise = $.when(promise, anotherPromise);

p.ej

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>");
        });
    });
});

Notas:

• Me di cuenta de esto después de ver a alguien encadenar promesas secuencialmente, usando promise = promise.then(newpromise)
• La desventaja es que crea objetos de promesa adicionales detrás de escena y los parámetros pasados ​​al final no son muy útiles (ya que están anidados dentro de objetos adicionales). Para lo que quieres, aunque es corto y simple.
• Lo bueno es que no requiere matriz o gestión de matriz.

Quiero proponer otro usando $ .each:

1. Podemos declarar la función ajax como:

   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. Parte del código donde creamos una matriz de funciones con ajax para enviar:

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

3. Y llamando a funciones con el envío de ajax:

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

Si está transpilando y tiene acceso a ES6, puede usar la sintaxis extendida que aplica específicamente cada elemento iterable de un objeto como un argumento discreto, tal como lo $.when()necesita.

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

MDN Link - Sintaxis extendida

Si está utilizando angularJS o alguna variante de la biblioteca de promesa Q, entonces tiene un .all()método que resuelve este problema exacto.

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

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

ver la API completa:

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

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

Tuve un caso muy similar en el que publicaba en cada bucle y luego configuraba el marcado html en algunos campos de los números recibidos del ajax. Luego necesitaba hacer una suma de los valores (ahora actualizados) de estos campos y colocarlos en un campo total.

Por lo tanto, el problema era que estaba tratando de hacer una suma de todos los números, pero aún no había recibido datos de las llamadas asíncronas ajax. Necesitaba completar esta funcionalidad en algunas funciones para poder reutilizar el código. Mi función externa espera los datos antes de ir y hacer algunas cosas con el DOM completamente actualizado.

    // 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;
    }