Beispielcode zur Implementierung der gleichzeitigen Anforderungssteuerung in JavaScript/TypeScript

Beispielcode zur Implementierung der gleichzeitigen Anforderungssteuerung in JavaScript/TypeScript

Szenario

Angenommen, es gibt 10 Anfragen, aber die maximale Anzahl gleichzeitiger Anfragen beträgt 5 und die Anfrageergebnisse sind erforderlich. Dies ist eine einfache gleichzeitige Anfragesteuerung.

Simulation

Verwenden Sie setTimeout, um eine einfache Simulation einer Anfrage durchzuführen

let startTime = Date.now();
const timeout = (timeout: Zahl, ret: Zahl) => {
 return (idx?: beliebig) =>
 neues Versprechen((lösen) => {
  setzeTimeout(() => {
  const vergleichen = Date.now() - Startzeit;
  console.log(`Bei ${Math.floor(compare / 100)}00 returnieren`, ret);
  auflösen (idx);
  }, Zeitüberschreitung);
 });
};

const timeout1 = timeout(1000, 1);
const timeout2 = timeout(300, 2);
const timeout3 = timeout(400, 3);
const timeout4 = timeout(500, 4);
const timeout5 = timeout(200, 5);

Durch die Simulation der Anfrage auf diese Weise ist das Wesentliche Promise

Wenn keine Parallelitätskontrolle vorhanden ist

const run = async () => {
 Startzeit = Datum.jetzt();
 warte auf Promise.all([
 Zeitüberschreitung1(),
 timeout2(),
 timeout3(),
 timeout4(),
 timeout5(),
 ]);
};

laufen();

Bei 200 Rückkehr 5
Bei 300 Rückkehr 2
Bei 400 Rückkehr 3
Bei 500 Rückkehr 4
Bei 1000 Rückkehr 1

Sie können sehen, dass die Ausgabe 5 2 3 4 1 ist, was entsprechend der Timeout-Zeit ausgegeben wird.

Parallelitätsbedingungen

Angenommen, die maximale Anzahl gleichzeitiger Verbindungen beträgt 2, erstellen Sie eine Klasse

Klasse Gleichzeitig {
 private maxConcurrent: Zahl = 2;

 Konstruktor(Anzahl: Zahl = 2) {
 this.maxConcurrent = Anzahl;
 }
}

Die erste Parallelitätskontrolle

Denken Sie darüber nach, teilen Sie das Promise-Array entsprechend der maximalen Anzahl gleichzeitiger Zugriffe auf. Wenn ein Promise erfüllt ist, entfernen Sie es und fügen Sie dann das ausstehende Promise hinzu. Promise.race kann uns helfen, diese Anforderung zu erfüllen

Klasse Gleichzeitig {
 private maxConcurrent: Zahl = 2;

 Konstruktor(Anzahl: Zahl = 2) {
 this.maxConcurrent = Anzahl;
 }
 öffentliche asynchrone useRace(fns: Funktion[]) {
 const läuft: beliebig[] = [];
 // Promises entsprechend der Anzahl der Parallelitäten hinzufügen // Promises rufen einen Index zurück, sodass wir wissen, welches Promise aufgelöst wurde (let i = 0; i < this.maxConcurrent; i++) {
  wenn (fns.Länge) {
  const fn = fns.shift()!;
  ausführen.push(fn(i));
  }
 }
 const handle = async () => {
  wenn (fns.Länge) {
  const idx = warte auf Promise.race<Nummer>(läuft);
  const nextFn = fns.shift()!;
  // Entfernen Sie das abgeschlossene Promise und fügen Sie das neue in runing.splice(idx, 1, nextFn(idx)); ein.
  handhaben();
  } anders {
  // Wenn das Array gelöscht wurde, bedeutet dies, dass kein auszuführendes Promise vorhanden ist. Sie können es in Promise.all ändern.
  warte auf Promise.all(running);
  }
 };
 handhaben();
 }
}

const run = async () => {
 const parallel = neues paralleles();
 Startzeit = Datum.jetzt();
 warte auf concurrent.useRace([timeout1, timeout2, timeout3, timeout4, timeout5]);
};

Bei 300 Rückkehr 2
Bei 700 Rückkehr 3
Bei 1000 Rückkehr 1
Um 1200 zurück 5
Um 1200 Rückkehr 4

Sie können sehen, dass sich die Ausgabe geändert hat. Warum passiert das? Lassen Sie es uns analysieren. Die maximale Anzahl gleichzeitiger Verbindungen beträgt 2.

// Als erstes wird 1 2 ausgeführt
1 Es dauert 1000 MS, um abzuschließen
2 300 MS erforderlich

2 wird ausgeführt, die Zeitleiste beträgt 300. Entfernen Sie 2. Fügen Sie 3 hinzu. Beginnen Sie mit der Ausführung von 3.
3 dauert 400 ms. Die Ausführungszeit beträgt 700 ms. Entfernen Sie 3. Fügen Sie 4 hinzu. Starten Sie die Ausführung von 4.
4 Erfordert 500 MS
Die Zeitleiste erreicht 1000 MS, 1 wird ausgeführt und entfernt, 5 wird hinzugefügt und 5 wird gestartet
Die Zeitleiste erreicht 1200 MS und die Schritte 4 und 5 werden gleichzeitig ausgeführt.

Zweite Option

Sie können den Wartemechanismus verwenden, der eigentlich ein kleiner Trick ist

Der Warteausdruck unterbricht die Ausführung der aktuellen asynchronen Funktion und wartet auf die Erfüllung des Promise. Wenn das Versprechen erfüllt wird, wird der Resolve-Funktionsparameter des Rückrufs als Wert des Await-Ausdrucks verwendet, um mit der Ausführung der asynchronen Funktion fortzufahren.

Wenn die aktuelle Anzahl gleichzeitiger Anfragen die maximale Anzahl gleichzeitiger Anfragen überschreitet, können Sie ein neues Promise festlegen und warten. Wenn Sie auf die Fertigstellung anderer Anfragen warten, lösen Sie die Wartezeit auf und entfernen Sie sie. Daher müssen Sie zwei neue Zustände hinzufügen, die aktuelle Anzahl gleichzeitiger Anfragen und ein Array zum Speichern der Callback-Funktion „Resolve“.

Klasse Gleichzeitig {
 private maxConcurrent: Zahl = 2;
 private Liste: Funktion[] = [];
 privater aktuellerAnzahl: Zahl = 0;

 Konstruktor(Anzahl: Zahl = 2) {
 this.maxConcurrent = Anzahl;
 }
 öffentliches asynchrones Addieren (fn: Funktion) {
 dies.aktuellerAnzahl += 1;
 // Wenn die maximale Anzahl gleichzeitiger Verbindungen das Maximum überschritten hat, if (this.currentCount > this.maxConcurrent) {
  // wait ist ein Promise, welches erfüllt wird, sobald resolve aufgerufen wird const wait = new Promise((resolve) => {
  diese.Liste.push(auflösen);
  });
  // Wenn „resolve“ nicht aufgerufen wird, wird „await wait“ hier blockiert.
 }
 //Funktion ausführen await fn();
 dies.aktuellerAnzahl -= 1;
 wenn (diese.Liste.Länge) {
  // Nehmen Sie „resolve“ heraus und rufen Sie es auf, damit das Warten abgeschlossen ist und Sie es unten ausführen können. const resolveHandler = this.list.shift()!;
  lösenHandler();
 }
 }
}

const run = async () => {
 const parallel = neues paralleles();
 Startzeit = Datum.jetzt();
 gleichzeitiges Hinzufügen (Timeout1);
 gleichzeitiges Hinzufügen (Timeout2);
 gleichzeitiges Hinzufügen (Timeout3);
 gleichzeitiges Hinzufügen (Timeout4);
 gleichzeitiges Hinzufügen (Timeout5);
};

laufen();

Bei 300 Rückkehr 2
Bei 700 Rückkehr 3
Bei 1000 Rückkehr 1
Um 1200 zurück 5
Um 1200 Rückkehr 4

Zusammenfassen

Beide Methoden können Parallelitätskontrolle erreichen, aber die Implementierungsmethoden sind unterschiedlich. Sie werden hauptsächlich durch Promise implementiert. Darüber hinaus berücksichtigt die Implementierungsmethode keine abnormalen Situationen, die Sie selbst hinzufügen können.

Damit ist dieser Artikel über Beispielcode zur Implementierung der parallelen Anforderungssteuerung mit JavaScript/TypeScript abgeschlossen. Weitere Inhalte zur parallelen Anforderungssteuerung in JavaScript 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:
  • Detaillierte Erklärung der privaten Klassenfelder von JavaScript und der privaten Modifizierungen von TypeScript
  • JS-Dekorationsmuster und TypeScript-Dekoratoren
  • Detaillierte Erklärung der einfachen Verwendung von RxJS in TypeScript
  • So verwenden Sie TypeScript in Vue.js
  • Spezifische Verwendung von void in JavaScript und TypeScript
  • Detaillierte Erläuterung des Implementierungscodes für die Abhängigkeitsinjektion von Typescript nodejs
  • vue + typescript + video.js zur Realisierung der Streaming-Videoüberwachungsfunktion
  • Lernen Sie, wie Sie mit TypeScript Node.js-Anwendungen entwickeln
  • Die Verbindung zwischen JavaScript und TypeScript

<<:  js Addition, Subtraktion, Multiplikation und Division – Beispielcode für präzise Berechnungsmethoden

>>:  Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 winx64

Artikel empfehlen

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

Bei der Verwendung von Nginx als Reverse-Proxy fü...

Velocity.js implementiert den Seiten-Scrolling-Umschalteffekt

Heute werde ich ein kleines Javascript-Animations...

Schritte zur Lösung des Zeitzonenproblems in MySQL 8.0

Softwareversion Windows: Windows 10 MySQL: mysql-...

Detaillierte Schritte zur Installation des NERDTree-Plugins in Vim unter Ubuntu

NERDTree ist ein Dateisystembrowser für Vim. Mit ...

Eine Zusammenfassung detaillierter Einblicke in den Import von CSS

Auf die Entwicklungsgeschichte von CSS wird hier ...

Verwenden Sie HTML und CSS, um Ihren eigenen warmen Mann „Dabai“ zu erstellen.

Das Endergebnis sieht so aus, ist es nicht süß … ...

So lösen Sie das Phantomleseproblem in MySQL

Inhaltsverzeichnis Vorwort 1. Was ist Phantomlese...

Grundlegendes Tutorial zur Bedienung von Dateien und Berechtigungen in CentOS

Vorwort Bevor wir beginnen, sollten wir uns kurz ...

Führen Sie die Schritte zur Installation von MySQL 8.0.x unter Linux aus.

MySQL Einführung in MySQL MySQL war ursprünglich ...

vue + ts realisiert den Effekt des Ziehens von Elementen mit der Maus

In diesem Artikelbeispiel wird der spezifische Co...