Heim > Artikel > Web-Frontend > 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 undnode.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
jqueryDer 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
, 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.
Demo des Versprechens
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('all of ajax is done',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:
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!