js implementiert Axios Limit-Anforderungswarteschlange

Der Hintergrund ist:

Bei der tatsächlichen Entwicklung können Netzwerkprobleme oder eine große Anzahl von Abfragen auftreten und der Benutzer kann die nächste Anforderung initiieren, bevor die vorherige Anforderung abgeschlossen ist.

Was wird passieren?

Das mehrmalige Senden derselben Anfrage an den Server belastet den Server jedoch zweifellos. Daher ist es notwendig, die Anfragen am Front-End zu begrenzen, nachdem die Abfragegeschwindigkeit des Servers optimiert wurde und die Netzwerkbedingungen des Benutzers schlecht sind.

Das mit Axios gelieferte CancelToken kann uns dabei helfen, diese Anforderung zu erfüllen, und stellt uns eine vorgefertigte API axios.CancelToken zur Verfügung, eine Rückruffunktion, deren Rückgabewert eine Anforderungsinformation ist. Wir können diese Rückruffunktion ausführen, wenn wir abbrechen müssen. Die konkrete Umsetzung sieht wie folgt aus:

const service = axios.create({});
const pendingMap = neue Map();
const addPendding = (Konfiguration) => {
 config.cancelToken = config.cancelToken || neues axios.CancelToken(abbrechen => {
  wenn (!pendingMap.has(config.url)){
   penddingMap.set(Konfigurations-URL,Abbrechen);
  }
 })
}

const removePendding = (Konfiguration) => {
 wenn (pendingMap.has(config.url)){
  let abbrechen = penddingMap.get(config.url);
    Abbrechen (Konfigurations-URL);
    penddingMap.delete(Konfigurations-URL)
 }
}

Eine Map wird lokal verwaltet, um alle Anforderungsinformationen zu speichern. In addPendding wird zunächst ermittelt, ob ein cancelToken vorhanden ist. Wenn dies der Fall ist, muss kein cancelToken neu erstellt werden. Bei removePendding wird ermittelt, ob die Anforderungsinformationen in der Map vorhanden sind. Wenn die Anforderung in der Map vorhanden ist, wird die Abbruchfunktion ausgeführt und die Anforderung in der Map gelöscht.

Spezifische Anwendung im Abfangjäger:

service.interceptors.request.use(config => {
 removePending(config) // Wenn es in der Map vorhanden ist, breche zuerst die Anfrage ab addPending(config) // Füge die Anfrage der Map hinzu return config
})

service.interceptors.response.use(response => {
 ``` // etwas Code
  Antwortdaten zurückgeben
}, Fehler => {
 // Abbruchanforderung erfassen und if(error instanceof Cancel){ auslösen.
    error.message = „Die vorherige Anfrage ist noch nicht beendet, bitte warten~“;
    Nachricht.Fehler(Fehlernachricht);
    returniere Promise.reject(Fehler.Antwort) 
  // Achten Sie hier auf den Wurf, rufen Sie try-catch auf, um ihn beim Anfordern zu erfassen})
)

Sobald das Abfangen hier erfolgreich ist, können mehrere Anfragen mit großem Datenverkehr begrenzt werden.

Dies ist nur ein Beispiel. Sie können auch steuern, ob der Benutzer eine Anfrage initiiert, indem Sie die Schaltflächenlogik beurteilen.

Dies ist das Ende dieses Artikels über die Implementierung der Axios-Begrenzung der Anforderungswarteschlange durch JS. Weitere relevante Inhalte zur Begrenzung der Axios-Anforderungswarteschlange durch JS 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!