So implementieren Sie die Ajax-Kontrolle gleichzeitiger Anforderungen basierend auf JS

So implementieren Sie die Ajax-Kontrolle gleichzeitiger Anforderungen basierend auf JS

Vorwort

Ich 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

  • Seriell: Im Allgemeinen muss die nächste Schnittstelle die von der vorherigen Schnittstelle zurückgegebenen Daten verwenden. Die häufig verwendete Anforderungsbibliothek für das Frontend ist Axios, eine Promise-basierte HTTP-Bibliothek. Wir können direkt Kettenaufrufe oder Async Await verwenden, um dies zu erreichen, daher werde ich es nicht demonstrieren.
  • Parallel: Mehrere Anfragen erfolgen gleichzeitig. Im Allgemeinen wird es verwendet, um die Seite zu rendern oder andere Vorgänge auszuführen, nachdem alle Daten abgerufen wurden. Es basiert hauptsächlich auf Promise.all. Die Implementierungsmethode ist wie folgt

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 Rekursion

Die 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 Implementierung

Die 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-Schaufenster

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

Zusammenfassen

Das 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:
  • Beispielcode für die Verwendung von js zur Implementierung gleichzeitiger Ajax-Anfragen, um die Anzahl der Anfragen zu begrenzen
  • ByteDance-Interview: So implementieren Sie mit JS die gleichzeitige Anforderungssteuerung von Ajax

<<:  Lösung für das Problem des Sitzungsverlusts bei Nginx

>>:  Methoden und Schritte zum Upgrade von MySql5.x auf MySql8.x

Artikel empfehlen

So konfigurieren Sie SSL für den Koa2-Dienst

I. Einleitung 1: SSL-Zertifikat Mein Domänenname ...

Der einfachste Weg zum Debuggen gespeicherter Prozeduren in MySQL

Ein Kollege hat mir einmal gesagt, ich solle eine...

Details zur Überwachung von DOM-Elementen durch MutationObServer in JavaScript

1. Grundlegende Verwendung Es kann über den Mutat...

MP3- oder Flashplayer-Code auf der Webseite abspielen

Code kopieren Der Code lautet wie folgt: <Obje...

uni-app implementiert NFC-Lesefunktion

In diesem Artikel wird der spezifische Code der U...

So übergeben Sie Parameter über CSS an JS

1. Hintergrund, der durch CSS übergeben werden mu...

Mysql-Optimierung Zabbix-Partitionsoptimierung

Der größte Engpass bei der Verwendung von Zabbix ...

9 praktische CSS-Eigenschaften, die Web-Frontend-Entwickler kennen müssen

1. Abgerundete Ecken Heutige Webdesigns halten stä...

CSS3-Animation zum Erzielen des Streamer-Button-Effekts

Beim Erlernen von CSS3 habe ich festgestellt, das...

Tipps zur Konvertierung von MySQL-Spalten in Zeilen (teilen)

Vorwort: Weil viele Geschäftstabellen Entwurfsmus...