VorwortIch habe vor kurzem eine Interviewfrage gesehen, natürlich ist es der Titel dieses Artikels, Ajax Concurrent Request Control, was ich sehr interessant finde. Ich habe in der Community nachgeschaut und es sollte eine Interviewfrage von ByteDance sein. Viele große Jungs haben das zusammengefasst. Ich habe sie alle gelesen, also möchte ich versuchen, es selbst zusammenzufassen. Der Code wird am Ende des Artikels veröffentlicht. Wenn etwas falsch ist, weisen Sie bitte darauf hin! Ajax seriell und parallel
Die obige Simulation implementiert parallele Operationen basierend auf Promise.all und die gedruckten Ergebnisse sind wie folgt Glauben Sie, dass dies das Ende ist und es so etwas gar nicht gibt? Jetzt kommt der Hauptgang. Stellen wir uns eine Situation vor, in der eine Seite Zehntausende Anfragen gleichzeitig senden und dann, nachdem alle erfolgreich waren, einige Vorgänge ausführen muss. Was werden die Konsequenzen sein? Der Code kann nicht ausgeführt werden und der Speicher läuft über. Nun sind wir wieder beim Thema unseres Artikels: Wie kontrolliert man gleichzeitige Ajax-Anfragen? Ich habe ihn gebeten, nur eine bestimmte Anzahl von Anfragen gleichzeitig auszugeben, bis alle erfolgreich waren. Als Nächstes werde ich zwei Methoden verwenden, um diesen Vorgang zu implementieren. Ich hoffe, die Leser werden mir einige Ratschläge geben. Zwei Lösungen für die gleichzeitige Anforderungssteuerung von Ajax Promise-basierte RekursionDie folgenden beiden Methoden erfordern beide das Tasks-Array in der obigen Abbildung. Bitte merken Sie sich das. Die erste auf Promise basierende Methode hat die folgende Idee: Wenn Sie einen gleichzeitigen Pool übergeben, wird ein Pool von Arbeitsbereichen erstellt. Jeder Arbeitsbereich kehrt zurück, um die entsprechende auszuführende Aufgabe (Anforderung) abzurufen, speichert sie nach Erfolg und ruft dann weiterhin Aufgaben (Anforderungen) ab, bis keine Aufgaben mehr im Arbeitsbereich vorhanden sind. Natürlich wird es direkt beendet, wenn es fehlschlägt. Dies ist die allgemeine Idee. Ich habe unten jede Codezeile kommentiert. Bitte akzeptieren Sie es. Klassenbasierte ImplementierungDie zweite Methode basiert auf Klasse. Der Unterschied zur obigen Methode besteht darin, dass diese Methode nur einen Arbeitsbereich erstellt. Die allgemeine Idee ist: Erstellen Sie einen Arbeitsbereich, um Aufgaben (Anforderungen) auszuführen, und verschieben Sie dann alle Aufgaben hinein, wobei jedes Mal nur die entsprechende Anzahl gleichzeitiger Aufgaben ausgeführt werden kann. Wenn diese Anzahl kleiner als die Anzahl gleichzeitiger Aufgaben ist, nehmen Sie weiterhin Aufgaben zur Ausführung, bis keine Aufgaben (Anforderungen) mehr vorhanden sind. Das ist alles. Im Folgenden finden Sie die spezifische Implementierung. Code-SchaufensterHier sind die Implementierungscodes dieser beiden Methoden. const delay = Funktion Verzögerung(Intervall) { gib ein neues Promise zurück((res,rej) => { setzeTimeout(() => { res(Intervall) }, Intervall); }) } let Aufgaben = [() => { Rückgabeverzögerung (1000) },() => { Rückgabeverzögerung(1003) },() => { Rückgabeverzögerung(1005) },() => { Rückgabeverzögerung(1002) },() => { Rückgabeverzögerung(1004) },() => { Rückgabeverzögerung(1006) }] // Parallelität durch Promise.all implementieren Promise.all(tasks.map(task => task())).then(res => { konsole.log(res); }) // Implementiere die Funktion creatRequest(tasks,pool) basierend auf Promise { // Die Anzahl der jeweils gesendeten Anfragen wird vom Pool gesteuert Pool = Pool || 5 // Wird zum Speichern der Ergebnisse jeder Anfrage verwendet (in der richtigen Reihenfolge gespeichert) lass Ergebnisse = [], // together wird verwendet, um Arbeitsbereiche zu erstellen. Wenn pool übergeben wird, erstellen wir entsprechend mehrere Arbeitsbereiche. // Das heißt, wir erstellen ein Array mit der Länge von pool und dem Wert null together = new Array(pool).fill(null), // Index ist der Taskwert, der jedes Mal erhalten wird. Index = 0; zusammen = zusammen.map(() => { // Verwaltung basierend auf Promise return new Promise((resolve,reject) => { // Eine Funktion erstellen und sofort ausführen const run = function run() { // Wenn der Taskpool leer ist, bedeutet dies, dass die Anfrage erfolgreich gesendet wurde, if(index >= tasks.length) { lösen() zurückkehren } // Speichern Sie zuerst den Index, um das Ergebnis der aktuellen erfolgreichen Anforderung zu speichern. let old_index = index, // Die aktuell gesendete Anfrage abrufen und dann den Index akkumulieren, sodass der Index oben gespeichert wird // Hier wird zuerst index++ berechnet und dann akkumuliert, während ++index das Gegenteil ist, zuerst akkumulieren und dann berechnen task = tasks[index++]; // Anforderung ausführen task().then(result => { // Speichere das erfolgreiche Ergebnis results[old_index] = result // Rekursiv mit der Ausführung fortfahren, d. h. die Aufgabe weiterhin in den Arbeitsbereich bringen, um sie auszuführen. run(); }).catch(Grund => { ablehnen (Grund) }) } // Führe run() sofort aus }) }) //Verwenden Sie Promise.all, um den Arbeitsbereich zu steuern, d. h. stellen Sie zwei Anfragen gleichzeitig. return Promise.all(together).then(() => results) } creatRequest(Aufgaben,2).dann(Ergebnisse => { // Alles muss erfolgreich sein, damit das Ganze erfolgreich ist. Speichern Sie die Ergebnisse der Reihe nach. console.log('success',results); }).catch(auflösen => { // Wenn nur einer von ihnen ausfällt, fällt das ganze System aus console.log('failed'); }) // Implementiere die Funktion creatRequest(tasks,pool,callback) basierend auf Klasse { // Parametereinschränkung und -überprüfung if(typeof pool === 'function') { Rückruf = Pool; Pool = 5 } wenn (Pooltyp !== 'Zahl') Pool = 5 wenn (Typ des Rückrufs !== 'Funktion') Rückruf = Funktion () {} //------ Klasse TaskQueue { // Anzahl der laufenden Läufe = 0; // Alle Aufgaben in der Warteschlange = [] in die Warteschlange stellen; //Speichern Sie die Ergebnisse der Aufgabenausführung (Anfragen). results = []; pushTask(Aufgabe) { lass selbst = dies // Aufgabe in den Arbeitsbereich verschieben self.queue.push(task) // Führe die Logik zum Senden der Anfrage aus self.next() } nächste() { lass selbst = dies // Wenn die Anzahl der ausgeführten Aufgaben geringer ist als die Parallelität, weiterhin Aufgaben zur Ausführung übernehmen while(self.runing < pool && self.queue.length) { selbst.läuft++; // Dies entspricht dem Übernehmen und Löschen einer Aufgabe. let task = self.queue.shift(); // Anforderung ausführen task().then(result => { //Speichern Sie die Ausführungsergebnisse self.results.push(result) }).schließlich(() => { //Anzahl der laufenden Elemente löschen self.runing-- // Mit der Ausführung der Anfrage fortfahren self.next() }) } // Wenn keine Aufgaben vorhanden sind, endet die Schleife if(self.runing === 0) callback(self.results) } } // Instanziierung let TQ = new TaskQueue() Aufgaben.fürJeden(Aufgabe => TQ.pushTask(Aufgabe)) } creatRequest(Aufgaben,2,Ergebnisse=> { console.log(Ergebnisse); }) ZusammenfassenDas Obige ist eine Zusammenfassung dieser Interviewfragen. Ich habe sie mir auch selbst notiert. Ich werde auch in Zukunft Front-End-Artikel aktualisieren. Abschließend hoffe ich, dass alle Front-End-Freunde weiter lernen und ihre Fähigkeiten kontinuierlich verbessern können. Komm schon, junger Mann! ! ! Dies ist das Ende dieses Artikels zur Implementierung der Ajax-Konkurrenzanforderungssteuerung auf Basis von JS. Weitere relevante Inhalte zur Implementierung der Ajax-Konkurrenzanforderungssteuerung mit JS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Lösung für das Problem des Sitzungsverlusts bei Nginx
>>: Methoden und Schritte zum Upgrade von MySql5.x auf MySql8.x
I. Einleitung 1: SSL-Zertifikat Mein Domänenname ...
Ein Kollege hat mir einmal gesagt, ich solle eine...
Lassen Sie mich mit einer Frage beginnen: Wenn Si...
1. Grundlegende Verwendung Es kann über den Mutat...
Code kopieren Der Code lautet wie folgt: <Obje...
In diesem Artikel wird der spezifische Code der U...
Im Folgenden finden Sie eine Einführung in die Ve...
1. Hintergrund, der durch CSS übergeben werden mu...
Die Installations- und Konfigurationsmethode der ...
Der größte Engpass bei der Verwendung von Zabbix ...
1. Abgerundete Ecken Heutige Webdesigns halten stä...
Beim Erlernen von CSS3 habe ich festgestellt, das...
Vorwort: Weil viele Geschäftstabellen Entwurfsmus...
Ob der a-Tag eine neue Seite öffnet: (1) Baidu Enc...
1.0 Redis-Persistenz Redis ist eine In-Memory-Dat...