ByteDance-Interview: So implementieren Sie mit JS die gleichzeitige Anforderungssteuerung von Ajax

Vorwort

Ehrlich gesagt fühle ich mich in letzter Zeit sehr verwirrt. Über Technik und Leben. Ich habe auch mit vielen Freunden in großen Unternehmen gesprochen, in der Hoffnung, einige Ideen für die zukünftige Entwicklung zu bekommen. Wir haben auch über Vorstellungsgespräche und einige der Fragen gesprochen, die den Bewerbern bei der Einstellung gestellt werden. Zufällig hatte ich schon lange kein Vorstellungsgespräch mehr gehabt und habe daher einige davon ausgewählt. Eine Reihe von Analysen einiger Interviewfragen wird in Kürze veröffentlicht.

Das heutige ist von ByteDance:

Implementieren Sie eine Batch-Anforderungsfunktion multiRequest(urls, maxNum) mit den folgenden Anforderungen:

• Erfordert die maximale Anzahl gleichzeitiger Verbindungen maxNum

• Bei jeder Rückgabe einer Anfrage bleibt ein Platz für eine neue Anfrage frei.

• Nachdem alle Anfragen abgeschlossen sind, werden die Ergebnisse in der Reihenfolge der URLs ausgedruckt

Ich denke, viele Studenten haben diese Frage bis zu einem gewissen Grad gesehen. Im Folgenden werde ich das Szenario, die Problemanalyse und die endgültige Implementierung Schritt für Schritt durchgehen und versuchen, auf einfache und leicht verständliche Weise eine vollständige Analyse dieser Frage zu geben.

Szenario

Angenommen, es gibt ein solches Szenario: Es müssen 30 asynchrone Anfragen gesendet werden, aber aus irgendeinem Grund müssen wir die Anzahl der gleichzeitigen Anfragen auf weniger als 5 begrenzen und die Antwortergebnisse so schnell wie möglich erhalten.

Was ist zu tun?

Sehen wir uns zunächst die serielle und parallele Natur von Ajax an.

Implementierung von seriellem und parallelem Ajax basierend auf Promise.all

Normalerweise kapseln wir asynchrone Anfragen basierend auf Versprechen und konzentrieren uns hier hauptsächlich auf asynchrone Anfragen.

• Seriell: Nachdem eine asynchrone Anfrage abgeschlossen ist, wird die nächste Anfrage gestellt
• Parallelität: Mehrere asynchrone Anfragen werden gleichzeitig verarbeitet
  

Indem einige Promise-Instanzen definiert werden, um speziell seriell/parallel zu demonstrieren.

Seriell

var p = Funktion () {
  returniere neues Promise(Funktion (auflösen, ablehnen) {
    setzeTimeout(() => {
      console.log("1000");
      lösen();
    }, 1000);
  });
};
var p1 = Funktion () {
  returniere neues Promise(Funktion (auflösen, ablehnen) {
    setzeTimeout(() => {
      konsole.log("2000");
      lösen();
    }, 2000);
  });
};
var p2 = Funktion () {
  returniere neues Promise(Funktion (auflösen, ablehnen) {
    setzeTimeout(() => {
      konsole.log("3000");
      lösen();
    }, 3000);
  });
};

P()
  .then(() => {
    gibt p1 zurück();
  })
  .then(() => {
    p2 zurückgeben();
  })
  .then(() => {
    console.log("Ende");
  });

Wie im Beispiel gezeigt, führt die Serielle Schnittstelle die entsprechenden Anfragen der Schnittstelle von oben nach unten aus.

parallel

Wenn wir sicherstellen müssen, dass der Code nach mehreren asynchronen Prozessen ausgeführt wird, verwenden wir normalerweise:

Promise.all((Versprechen: [])).then((Spaß: Funktion));
Promise.all kann sicherstellen, dass alle Promise-Objekte im Promise-Array den aufgelösten Zustand erreichen, bevor der Then-Callback ausgeführt wird.

var Versprechen = Funktion () {
  return [1000, 2000, 3000].map((aktuell) => {
    returniere neues Promise(Funktion (auflösen, ablehnen) {
      setzeTimeout(() => {
        konsole.log(aktuell);
      }, aktuell);
    });
  });
};

Versprechen.alle(Versprechen()).dann(() => {
  console.log("Ende");
});

Promise.all Parallelitätslimit

Stellen Sie sich folgendes Szenario vor: Jedes Objekt in Ihrem Promise-Array ist eine HTTP-Anfrage und es gibt Hunderttausende solcher Objekte.

Was passieren wird, ist, dass Sie in einem Augenblick Hunderttausende von HTTP-Anfragen senden, was wahrscheinlich zur Ansammlung unzähliger Aufrufstapel und zu einem Speicherüberlauf führt.

Zu diesem Zeitpunkt müssen wir die Parallelitätsbeschränkungen für Promise.all berücksichtigen.

Die Parallelitätsbegrenzung von Promise.all bedeutet, dass die Anzahl der zu jedem Zeitpunkt gleichzeitig ausgeführten Versprechen festgelegt ist und das endgültige Ausführungsergebnis mit dem ursprünglichen Promise.all übereinstimmt.

Titel Implementierung

Gedankenanalyse

Der gesamte Prozess wird mithilfe rekursiver Aufrufe implementiert: Die Anzahl der anfangs gesendeten Anfragen ist auf das zulässige Maximum begrenzt, und jede dieser Anfragen sollte nach Abschluss weiterhin rekursiv gesendet werden, wobei die spezifische URL in URLs durch den übergebenen Index bestimmt wird, um sicherzustellen, dass die endgültige Ausgabereihenfolge nicht durcheinander gerät, sondern sequenziell ausgegeben wird.

Code-Implementierung

Funktion multiRequest(urls = [], maxNum) {
  //Gesamtzahl der Anfragen const len ​​= urls.length;
  // Erstellen Sie ein Array, um die Anforderungsergebnisse basierend auf der Anzahl der Anforderungen zu speichern const result = new Array(len).fill(false);
  // Aktuell abgeschlossene Zahl let count = 0;

  returniere neues Promise((lösen, ablehnen) => {
    // maxNum anfordern while (Anzahl < maxNum) {
      nächste();
    }
    Funktion nächstes() {
      sei aktuell = Anzahl++;
      // Randbedingungen behandeln if (current >= len) {
        // Sobald alle Anfragen abgeschlossen sind, setzen Sie das Versprechen auf einen erfolgreichen Status und geben Sie dann das Ergebnis als Versprechenswert zurück!result.includes(false) und resolve(result);
        zurückkehren;
      }
      const url = urls[aktuell];
      console.log(`start ${current}`, neues Date().toLocaleString());
      abrufen (URL)
        .then((res) => {
          // Anfrageergebnis speichern result[current] = res;
          console.log(`Abgeschlossen${current}`, neues Date().toLocaleString());
          // Wenn die Anfrage nicht abgeschlossen ist, rekursiere if (current < len) {
            nächste();
          }
        })
        .catch((err) => {
          console.log(`Ende ${current}`, neues Date().toLocaleString());
          Ergebnis[aktuell] = Fehler;
          // Wenn die Anfrage nicht abgeschlossen ist, rekursiere if (current < len) {
            nächste();
          }
        });
    }
  });
}

Zusammenfassen

Dies ist das Ende dieses Artikels über das ByteDance-Interview zur Verwendung von JS zur Implementierung der Ajax-Konkurrenzanforderungssteuerung. Weitere relevante Inhalte zur JS-Implementierung der Ajax-Konkurrenzanforderungssteuerung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!