J'en ai async ajax requests

$.ajax({
    url: 'first.php',
    async: true,
    success: function (data) {
        //do stuff
    }
});

$.ajax({
    url: 'second.php',
    async: true,
    success: function (data) {
        //do stuff
    }
});

...

$.ajax({
    url: 'nth.php',
    async: true,
    success: function (data) {
        //do stuff
    }
});

Je veux exécuter console.log() lorsque chaque requête est terminée.

J'écris habituellement ce code:

$.ajax({
    url: 'first.php',
    async: true,
    success: function (data) {
        $.ajax({
            url: 'second.php',
            async: true,
            success: function (data) {
                //till the last ajax
            }
        });
    }
});

Cependant, quelqu'un suggère Promise.all([]).

Si je devais exécuter, disons, 4 requêtes ajax, quelle méthode serait la meilleure / la plus rapide?

2
Vinserello 1 sept. 2020 à 17:04

2 réponses

Meilleure réponse

Utilisez Promise.all().

var promises = [];

promises.push(new Promise(done=>{
  $.ajax({
      url: 'first.php',
      async: true,
      success: done
  });
}));

promises.push(new Promise(done=>{
  $.ajax({
      url: 'second.php',
      async: true,
      success: done
  });
}));

promises.push(new Promise(done=>{
  $.ajax({
      url: 'nth.php',
      async: true,
      success: done
  });
}));

Promise.all(promises).then(()=>{
  console.log("All ajax completed.");
});
2
I wrestled a bear once. 1 sept. 2020 à 14:12

La documentation jQuery indique que:

Les objets jqXHR retournés par $ .ajax () à partir de jQuery 1.5 implémentent l'interface Promise, en leur donnant toutes les propriétés, méthodes et comportement d'une Promise (voir Objet différé pour plus d'informations).

jQuery.when ():

Fournit un moyen d'exécuter des fonctions de rappel basées sur zéro ou plusieurs objets Thenable, généralement des objets Deferred qui représentent des événements asynchrones.

Vous pouvez donc faire quelque chose comme:

jQuery.when(
    $.ajax({
        url: 'first.php',
        async: true,
        success: function (data) {
            //do stuff
        }
    }),

    $.ajax({
        url: 'second.php',
        async: true,
        success: function (data) {
            //do stuff
        }
    }),

    ...,

    $.ajax({
        url: 'nth.php',
        async: true,
        success: function (data) {
            //do stuff
        }
    })
).then(function() {console.log(...);});
0
Zoli Szabó 1 sept. 2020 à 14:16