Passez un tableau de différés à $ .when ()

Voici un exemple artificiel de ce qui se passe: 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>");
        });
    });
});

Je veux "Tout est fait!" à apparaître une fois toutes les tâches différées terminées, mais $.when()ne semble pas savoir comment gérer un tableau d'objets différés. "Terminé!" se produit d'abord parce que le tableau n'est pas un objet différé, donc jQuery va de l'avant et suppose que c'est juste fait.

Je sais que l'on pourrait passer les objets dans la fonction comme $.when(deferred1, deferred2, ..., deferredX)mais on ne sait pas combien d'objets différés il y aura lors de l'exécution dans le problème réel que j'essaie de résoudre.

Pour passer un tableau de valeurs à n'importe quelle fonction qui s'attend normalement à ce qu'il s'agisse de paramètres distincts, utilisez Function.prototype.apply, dans ce cas, vous avez besoin de:

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

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

Dans ES6, vous pouvez utiliser l' ... opérateur d'étalement à la place:

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

Dans les deux cas, puisqu'il est peu probable que vous sachiez à l'avance combien de paramètres formels le .thengestionnaire aura besoin, ce gestionnaire devra traiter le argumentstableau afin de récupérer le résultat de chaque promesse.

Les solutions de contournement ci-dessus (merci!) Ne résolvent pas correctement le problème de récupération des objets fournis à la resolve()méthode du différé car jQuery appelle les done()et fail()rappels avec des paramètres individuels, pas un tableau. Cela signifie que nous devons utiliser le argumentspseudo-tableau pour obtenir tous les objets résolus / rejetés renvoyés par le tableau de différés, ce qui est laid:

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

Puisque nous avons passé un tableau de différés, il serait bien de récupérer un tableau de résultats. Il serait également intéressant de récupérer un tableau réel au lieu d'un pseudo-tableau afin que nous puissions utiliser des méthodes comme Array.sort().

Voici une solution inspirée de la méthode when.jswhen.all() qui résout ces problèmes:

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

Maintenant, vous pouvez simplement passer un tableau de différés / promesses et récupérer un tableau d'objets résolus / rejetés dans votre rappel, comme ceci:

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

Vous pouvez appliquer la whenméthode à votre tableau:

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

$.when.apply($, arr);

Comment travaillez-vous avec un tableau de jQuery différés?

Lorsque vous appelez plusieurs appels AJAX parallèles, vous avez deux options pour gérer les réponses respectives.

1. Utiliser un appel AJAX synchrone / l'un après l'autre / non recommandé
2. Utilisez un Promises'tableau et $.whenqui accepte promises et son rappel .doneest appelé lorsque tous les promises sont renvoyés avec succès avec les réponses respectives.

Exemple

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>

Comme alternative simple, qui ne nécessite pas $.when.applyou un array, vous pouvez utiliser le modèle suivant pour générer une seule promesse pour plusieurs promesses parallèles:

promise = $.when(promise, anotherPromise);

par exemple

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

Remarques:

• J'ai compris celui-ci après avoir vu une chaîne promettre séquentiellement, en utilisant promise = promise.then(newpromise)
• L'inconvénient est qu'il crée des objets de promesse supplémentaires dans les coulisses et tous les paramètres passés à la fin ne sont pas très utiles (car ils sont imbriqués dans des objets supplémentaires). Pour ce que vous voulez, c'est court et simple.
• L'avantage est qu'il ne nécessite aucune baie ni gestion de baie.

Je veux en proposer un autre en utilisant $ .each:

1. Nous pouvons déclarer la fonction ajax comme:

   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. Partie du code où nous créons un tableau de fonctions avec ajax pour envoyer:

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

3. Et les fonctions d'appel avec l'envoi ajax:

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

Si vous transpilez et avez accès à ES6, vous pouvez utiliser la syntaxe de propagation qui applique spécifiquement chaque élément itérable d'un objet comme argument discret, exactement comme $.when()il en a besoin.

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

Lien MDN - Syntaxe de propagation

Si vous utilisez angularJS ou une variante de la bibliothèque Q promise, vous disposez d'une .all()méthode qui résout ce problème exact.

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

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

voir l'API complète:

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

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

J'ai eu un cas très similaire où je publiais dans une boucle each puis définissais le balisage html dans certains champs à partir des numéros reçus de l'ajax. J'ai ensuite dû faire une somme des valeurs (maintenant mises à jour) de ces champs et les placer dans un champ total.

Ainsi, le problème était que j'essayais de faire une somme sur tous les numéros mais aucune donnée n'était encore revenue des appels asynchrones ajax. J'avais besoin de compléter cette fonctionnalité dans quelques fonctions pour pouvoir réutiliser le code. Ma fonction externe attend les données avant d'aller ensuite faire des choses avec le DOM entièrement mis à jour.

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