Tipps zur Verwendung von jq zum Senden mehrerer Ajax-Dateien und zum anschließenden Ausführen von Rückrufen

Dieses Mal gebe ich Ihnen einige Tipps, wie Sie mit jq mehrere Ajax-Vorgänge senden und anschließend Rückrufe ausführen können Werfen wir einen Blick darauf. Empfohlen axios.js

Axios ist eine Promise-basierte HTTP-Bibliothek, die in Browsern und

node.js
verwendet werden kann. XMLHttpRequests aus dem Browser erstellen

HTTP-Anfragen aus node.js erstellen

Support PromiseAPI

Abfangen von Anfragen und Antworten

Konvertierung Anforderungsdaten und Antwortdaten

Anfrage abbrechen

JSON-Daten automatisch konvertieren

Client unterstützt den Schutz vor XSRF

Das Folgende basiert auf

jquery

Der Code ist kein axios.js-Code. Ich habe es getestet und es funktioniert. Wenn jemand die unten stehende Methode immer noch nicht verwenden kann, können Sie es in den Kommentaren unten erklären. Axios.js ist eine auf Versprechen basierende HTTP-Bibliothek. Es wird empfohlen, Axios.js auf npm, der chinesischen Version des Portals, zu durchsuchen. . .

Ich habe zwei Lösungen für dieses Problem gesehen:

(Ich persönlich denke, dass die erste Methode besser ist)

1. Die erste ist die Zählmethode, die außerhalb der Deklaration liegen muss eine

-Variable

, auf die bei jedem Rückruf zugegriffen werden kann. Fügen Sie diese Variable in der -Rückruffunktion für jede erfolgreiche Anfrage hinzu , aber es muss jede erfolgreiche Anfrage in der Rückruffunktion beurteilt werden. Funktionen: Da Ajax von Natur aus asynchron ist, stört sich jeder Ajax nicht gegenseitig und muss nicht nacheinander geladen werden. Die Gesamtanforderungszeit ist kürzer als beim zweiten Typ unten.

Demo der Zählmethode

Persönlicher Test, ob es funktioniert. Sie können Timeout auf dem Server festlegen, um eine Netzwerkverzögerung zu simulieren.

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

Tipps, wenn jemand die folgende Methode verwendet und sie immer noch funktioniert. Wenn es nicht funktioniert, kannst du es unten posten. Erkläre es in den Kommentaren!

2. Die zweite besteht darin, das Versprechen zu verwenden, die nächste Anfrage zu senden, nachdem die vorherige Anfrage abgeschlossen ist.

Funktionen: Jeder Ajax muss in der Reihenfolge der Anfrage und Antwort in die Warteschlange gestellt werden. Die nächste Anfrage muss nach der erfolgreichen Beantwortung der vorherigen Anfrage gestellt werden.

Demo des Versprechens

Persönlicher Test, es funktioniert. Sie können Timeout auf dem Server festlegen, um eine Netzwerkverzögerung zu simulieren.

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

Tipps, wenn jemand die folgende Methode verwendet und es immer noch funktioniert. Wenn es nicht funktioniert, können Sie unter der Beschreibung einen Kommentar abgeben!

Axios.js wird ebenfalls dringend empfohlen
Axios ist eine Promise-basierte HTTP-Bibliothek, die in Browsern und node.js verwendet werden kann.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Verwandte Lektüre:

Detaillierte Erklärung der Counters-Eigenschaft von CSS

Detaillierte Erklärung der Überladung von JavaScript-Funktionen

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung von jq zum Senden mehrerer Ajax-Dateien und zum anschließenden Ausführen von Rückrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!