Conseils sur l'utilisation de jq pour envoyer plusieurs ajax puis exécuter des rappels

Cette fois, je vais vous apporter quelques conseils sur la façon d'utiliser jq pour envoyer plusieurs ajax puis exécuter des rappels. Quelles sont les précautions pour utiliser jq pour envoyer plusieurs ajax puis exécuter des rappels. Voici les. cas pratiques. Jetons un coup d'oeil.

axios.js recommandé
Axios est une bibliothèque HTTP basée sur des promesses qui peut être utilisée dans les navigateurs et node.js.

Créer des requêtes XMLHttp depuis le navigateur

Créer des requêtes http à partir de node.js

Support PromiseAPI

Interception des requêtes et des réponses

Conversion Données de demande et données de réponse

Annuler la demande

Convertir automatiquement les données JSON

Le client prend en charge la défense contre XSRF

Ce qui suit est basé sur jquery Le code n'est pas du code axios.js.

Je l'ai testé et cela fonctionne. Si quelqu'un ne parvient toujours pas à utiliser la méthode ci-dessous, vous pouvez l'expliquer dans les commentaires ci-dessous. Axios.js est une bibliothèque HTTP basée sur des promesses. Il est recommandé de parcourir Axios.js sur npm, la version chinoise du portail. Le contenu suivant n'est pas important. . .

J'ai vu deux solutions à ce problème :
(Personnellement, je pense que la première méthode est meilleure)

1 La première est la méthode de comptage, qui doit être en dehors de Declare. une variable accessible par chaque rappel. Ajoutez cette variable par 1 dans la fonction de rappel pour chaque requête réussie. Si la variable est augmentée au maximum, le rappel sera exécuté. , mais il faut porter un jugement sur la fonction de rappel de chaque requête réussie.

Caractéristiques : Comme ajax est intrinsèquement asynchrone, chaque ajax n'interfère pas les uns avec les autres et n'a pas besoin d'être chargé l'un après l'autre dans l'ordre. Le temps total de requête est plus court que le deuxième type ci-dessous.

Démo de la méthode de comptage

function countAjax(arr,cb) {    var len = arr.length,
        result = [],
        count = 0;    for(let i=0; i<len; i++) {
        $.ajax({            type: arr[i].type,            url: arr[i].url,            success: function(res){
                count++;
                result[i] = res;                console.log("第" + ( i + 1 ) + "个ajax回调函数 " + res);                if( count == len ) {
                    cb(result);
                }
            }
        });
    }
}var arr = [{    url: "keepWords",    type: "get"},{    url: "xx",    type: "get"},{    url:"yy",    type: "get"}];
countAjax(arr,function(result){    console.log("all of ajax is done",result);
});

Test personnel, cela fonctionne, vous pouvez définir Timeout sur le serveur pour simuler le retard du réseau
Conseils, si quelqu'un utilise la méthode suivante et que cela ne fonctionne toujours pas Cela ne fonctionne pas, vous pouvez le poster ci-dessous. Expliquez dans les commentaires !

2. La seconde consiste à utiliser la promesse pour envoyer la prochaine demande une fois la demande précédente terminée.
Caractéristiques : chaque ajax doit être mis en file d'attente pour demander et répondre dans l'ordre. La demande suivante doit être effectuée une fois la demande précédente répondue avec succès, l'une après l'autre.

Démo de promesse

function orderAjax(arr,cb) {    var promise,
        result = [];    for(let i=0,len=arr.length; i<len; i++) {        if(!promise) {
            promise = $.ajax({                url: arr[i].url,                type: arr[i].type
            });
        }else {
            promise = promise.then(function(res) {
                result.push(res);                console.log("第" + ( i ) + "个ajax回调函数 " + res);                return $.ajax({                    url: arr[i].url,                    type: arr[i].type
                });
            })
        }
    }
    promise.then(function(res){
        result.push(res);        console.log("第" + ( arr.length ) + "个ajax回调函数 " + res);
        cb(result);
    });
}var arr = [{    url: "keepWords",    type: "get"},{    url: "xx",    type: "get"},{    url:"yy",    type: "get"}];
orderAjax(arr,function(result) {    console.log(&#39;all of ajax is done&#39;,result);
})

Test personnel, ça marche Vous pouvez définirTimeout sur le serveur pour simuler le retard du réseau
Conseils, si quelqu'un utilise la méthode suivante et que cela ne fonctionne toujours pas. Cela ne fonctionne pas, vous pouvez commenter ci-dessous Description !
Axios.js est également fortement recommandé
Axios est une bibliothèque HTTP basée sur des promesses qui peut être utilisée dans les navigateurs et node.js.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Explication détaillée de la propriété Counters de CSS

Explication détaillée de la surcharge des fonctions JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!