Axios storniert wiederholte Anfragen

Vorwort

Bei der Entwicklung von Webprojekten stoßen wir häufig auf Szenarien wiederholter Anforderungen. Wenn das System wiederholte Anforderungen nicht verarbeitet, können verschiedene Probleme im System auftreten. Beispielsweise können wiederholte Post-Requests dazu führen, dass auf der Serverseite zwei Datensätze generiert werden. Wie kommt es also zu doppelten Anfragen? Hier sind zwei gängige Szenarien:

• Angenommen, auf der Seite befindet sich eine Schaltfläche. Wenn der Benutzer auf die Schaltfläche klickt, wird eine AJAX-Anfrage initiiert. Wenn die Schaltfläche nicht gesteuert wird, werden wiederholte Anfragen gestellt, wenn der Benutzer schnell auf die Schaltfläche klickt.
• Angenommen, Benutzer können auf der Testergebnisabfrageseite die Testergebnisse basierend auf drei Abfragebedingungen abfragen: „Bestanden“, „Nicht bestanden“ und „Alle“. Wenn die Anforderungsantwort langsam ist, werden wiederholte Anforderungen generiert, wenn der Benutzer schnell zwischen verschiedenen Abfragebedingungen wechselt.
  

Nachdem wir nun wissen, wie doppelte Anfragen generiert werden, wissen wir auch, dass sie einige Probleme verursachen können. Als Nächstes zeigt Ihnen Bruder Abao am Beispiel von Axios, wie Sie das Problem doppelter Anfragen lösen können.

1. So stornieren Sie eine Anfrage

Axios ist ein Promise-basierter HTTP-Client, der sowohl Browser als auch Node.js-Umgebungen unterstützt. Es ist ein ausgezeichneter HTTP-Client und wird in zahlreichen Webprojekten häufig verwendet. Für die Browserumgebung verwendet die zugrunde liegende Schicht von Axios das XMLHttpRequest-Objekt, um HTTP-Anfragen zu initiieren. Wenn wir die Anforderung abbrechen möchten, können wir die Anforderung abbrechen, indem wir die Abbruchmethode für das XMLHttpRequest-Objekt aufrufen:

let xhr = neue XMLHttpRequest();
xhr.open("GET", "https://developer.mozilla.org/", true);
xhr.senden();
setTimeout(() => xhr.abort(), 300);

Was Axios betrifft, können wir die Anfrage über den von Axios bereitgestellten CancelToken stornieren:

const CancelToken = axios.CancelToken;
const Quelle = CancelToken.source();

axios.post('/Benutzer/12345', {
  Name: "Semlinker"
}, {
  cancelToken: Quelle.Token
})

source.cancel('Vorgang vom Benutzer abgebrochen.'); // Anfrage abbrechen, Parameter ist optional

Darüber hinaus können Sie auch ein CancelToken erstellen, indem Sie den CancelToken-Konstruktor aufrufen, wie unten gezeigt:

const CancelToken = axios.CancelToken;
abbrechen lassen;

axios.get('/Benutzer/12345', {
  cancelToken: neues CancelToken(Funktion Executor(c) {
    abbrechen = c;
  })
});

cancel(); // Anfrage abbrechen

Nachdem wir nun wissen, wie man CancelToken zum Abbrechen einer Anfrage in Axios verwendet, stellt sich die Frage: Wie funktioniert CancelToken intern? Beschäftigen wir uns hier zunächst mit dieser Frage. Bruder Abao wird Ihnen später das Geheimnis hinter CancelToken verraten. Als Nächstes analysieren wir, wie doppelte Anfragen ermittelt werden.

2. So ermitteln Sie doppelte Anfragen

Wenn die Anforderungsmethode, die Anforderungs-URL-Adresse und die Anforderungsparameter identisch sind, können wir davon ausgehen, dass die Anforderungen identisch sind. Daher können wir bei jeder Anforderung einen eindeutigen Schlüssel basierend auf der Anforderungsmethode, der Anforderungs-URL-Adresse und den Anforderungsparametern der aktuellen Anforderung generieren und für jede Anforderung ein dediziertes CancelToken erstellen und dann den Schlüssel und die Abbruchfunktion als Schlüssel-Wert-Paar in einem Map-Objekt speichern. Der Vorteil der Verwendung von Map besteht darin, dass schnell festgestellt werden kann, ob wiederholte Anforderungen vorliegen:

importiere qs von „qs“

const pendingRequest = neue Map();
// GET -> Parameter; POST -> Daten
const requestKey = [Methode, URL, qs.stringify(Params), qs.stringify(Daten)].join('&'); 
const cancelToken = neuer CancelToken(Funktion Executor(cancel) {
  wenn(!pendingRequest.has(requestKey)){
    pendingRequest.set(Anforderungsschlüssel, Abbrechen);
  }
})

Wenn doppelte Anfragen auftreten, können wir die Funktion „Abbrechen“ verwenden, um die zuvor ausgegebene Anfrage abzubrechen. Nach dem Abbrechen der Anfrage müssen wir die abgebrochene Anfrage auch aus „pendingRequest“ entfernen. Nachdem wir nun wissen, wie man eine Anfrage storniert und doppelte Anfragen erkennt, schauen wir uns an, wie man doppelte Anfragen storniert.

3. So stornieren Sie wiederholte Anfragen

Da wir alle Anfragen verarbeiten müssen, können wir die Verwendung des Interceptor-Mechanismus von Axios in Betracht ziehen, um die Funktion zum Abbrechen doppelter Anfragen zu implementieren. Axios stellt Entwicklern Anforderungs-Interceptors und Antwort-Interceptors zur Verfügung, die über die folgenden Funktionen verfügen:

• Anforderungs-Interceptor: Die Funktion dieses Interceptor-Typs besteht darin, vor dem Senden der Anforderung bestimmte Vorgänge einheitlich auszuführen, z. B. das Hinzufügen eines Token-Felds zum Anforderungsheader.
• Antwort-Interceptor: Die Funktion dieses Interceptor-Typs besteht darin, nach dem Empfang der Serverantwort bestimmte Vorgänge einheitlich auszuführen. Wenn der Antwortstatuscode beispielsweise 401 lautet, wird automatisch zur Anmeldeseite gesprungen.
  

3.1 Hilfsfunktionen definieren

Bevor wir den Anforderungs-Interceptor und den Antwort-Interceptor konfigurieren, definieren wir drei Hilfsfunktionen:

generateReqKey: wird verwendet, um einen Anforderungsschlüssel basierend auf den aktuellen Anforderungsinformationen zu generieren;
Funktion generateReqKey(config) {
  const { Methode, URL, Parameter, Daten } = Konfiguration;
  return [Methode, URL, Qs.stringify(Parameter), Qs.stringify(Daten)].join("&");
}

addPendingRequest: wird verwendet, um die aktuellen Anforderungsinformationen zum pendingRequest-Objekt hinzuzufügen;

const pendingRequest = neue Map();
Funktion addPendingRequest(Konfiguration) {
  const requestKey = generateReqKey(Konfiguration);
  config.cancelToken = config.cancelToken || neues axios.CancelToken((abbrechen) => {
    wenn (!pendingRequest.has(requestKey)) {
       pendingRequest.set(Anforderungsschlüssel, Abbrechen);
    }
  });
}

removePendingRequest: Überprüft, ob eine doppelte Anfrage vorliegt und bricht ggf. die gesendete Anfrage ab.

Funktion removePendingRequest(config) {
  const requestKey = generateReqKey(Konfiguration);
  wenn (pendingRequest.has(requestKey)) {
     const cancelToken = pendingRequest.get(requestKey);
     cancelToken(Anforderungsschlüssel);
     ausstehendeAnfrage.Löschen(Anfrageschlüssel);
  }
}

Nachdem wir die Funktionen generateReqKey, addPendingRequest und removePendingRequest erstellt haben, können wir den Anforderungs-Interceptor und den Antwort-Interceptor einrichten.

3.2 Einrichten eines Anforderungs-Interceptors

axios.interceptors.request.use(
  Funktion (Konfiguration) {
    removePendingRequest(config); // Überprüfen, ob eine doppelte Anfrage vorliegt. Wenn ja, die gesendete Anfrage abbrechen. addPendingRequest(config); // Die aktuellen Anfrageinformationen dem pendingRequest-Objekt hinzufügen. return config;
  },
  (Fehler) => {
     returniere Promise.reject(Fehler);
  }
);

3.3 Einrichten eines Antwort-Interceptors

axios.interceptors.response.use(
  (Antwort) => {
     removePendingRequest(response.config); //Anfrage aus dem PendingRequest-Objekt entfernen, Antwort zurückgeben;
   },
   (Fehler) => {
      removePendingRequest(error.config || {}); // Entfernen Sie die Anforderung aus dem pendingRequest-Objekt if (axios.isCancel(error)) {
        console.log("Doppelte Anfrage abgebrochen: " + error.message);
      } anders {
        // Ausnahmebehandlung hinzufügen }
      returniere Promise.reject(Fehler);
   }
);

Da der vollständige Beispielcode ziemlich lang ist, werde ich den spezifischen Code nicht veröffentlichen. Wenn Sie interessiert sind, können Sie unter der folgenden Adresse den Beispielcode durchsuchen.

Vollständiger Beispielcode: https://gist.github.com/semlinker/e426780664f0186db434882f1e27ac3a

Hier sehen wir uns die Ergebnisse des Axios-Beispiels zur Stornierung doppelter Anfragen an:

Wie aus der obigen Abbildung ersichtlich ist, werden bei doppelten Anfragen die zuvor gesendeten und nicht abgeschlossenen Anfragen storniert. Nachfolgend fassen wir den Vorgang zum Stornieren doppelter Anfragen anhand eines Flussdiagramms zusammen:

Lassen Sie uns abschließend die oben gestellte Frage beantworten: Wie funktioniert CancelToken intern?

4. So funktioniert CancelToken

Im vorherigen Beispiel haben wir ein CancelToken-Objekt erstellt, indem wir den CancelToken-Konstruktor aufgerufen haben:

neues axios.CancelToken((abbrechen) => {
  wenn (!pendingRequest.has(requestKey)) {
    pendingRequest.set(Anforderungsschlüssel, Abbrechen);
  }
})

Als nächstes analysieren wir den CancelToken-Konstruktor, der in der Datei lib/cancel/CancelToken.js definiert ist:

// lib/cancel/CancelToken.js
Funktion CancelToken(Executor) {
  wenn (Typ des Executors !== 'Funktion') {
    throw new TypeError('Executor muss eine Funktion sein.');
  }

  var lösenPromise;
  this.promise = neues Versprechen (Funktion promiseExecutor(resolve) {
    resolvePromise = lösen;
  });

  var token = dies;
  Executor (Funktion Abbrechen (Nachricht) { // Setze das Abbruchobjekt, wenn (Token.Grund) {
      return; // Stornierung wurde bereits beantragt
    }
    token.reason = neue Abbrechen(Nachricht);
    Versprechen auflösen(token.reason);
  });
}

Aus dem obigen Code können wir erkennen, dass das Cancel-Objekt eine Funktion ist. Wenn wir diese Funktion aufrufen, wird ein Cancel-Objekt erstellt und die Methode resolvePromise aufgerufen. Nachdem diese Methode ausgeführt wurde, wird der Status des Promise-Objekts aufgelöst, auf das die Promise-Eigenschaft des CancelToken-Objekts zeigt. Was ist also der Zweck dieses Vorgehens? Hier haben wir die Antwort aus der Datei lib/adapters/xhr.js gefunden:

// lib/adapters/xhr.js 
wenn (config.cancelToken) {
  config.cancelToken.promise.then(Funktion beiAbgebrochen(Abbrechen) {
    wenn (!Anfrage) { return; }
    request.abort(); // Anfrage abbrechen reject(cancel);
    Anfrage = null;
  });
}

Nach dem Lesen des obigen Inhalts verstehen einige Freunde möglicherweise das Funktionsprinzip von CancelToken nicht. Daher hat Bruder Abao ein weiteres Bild gezeichnet, damit jeder das Funktionsprinzip von CancelToken versteht:

V. Fazit

Dieser Artikel beschreibt, wie man wiederholte Anfragen in Axios storniert und wie CancelToken funktioniert. In den folgenden Artikeln wird Abao Ge erklären, wie man Daten-Caching in Axios einrichtet. Interessierte Freunde sollten es nicht verpassen. Wenn Sie mehr über das Design und die Implementierung von HTTP-Interceptors und HTTP-Adaptern in Axios erfahren möchten, können Sie den Artikel „Welche Dinge kann man aus dem 77.9K Axios-Projekt lernen?“ lesen.

Dies ist das Ende dieses Artikels über das Stornieren doppelter Anfragen durch Axios. Weitere Informationen zum Stornieren doppelter Anfragen durch Axios 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!

6. Referenzressourcen

• Github - Axios
• MDN - XMLHttpRequest
• Welche Erkenntnisse können wir aus dem 77.9K-Axios-Projekt gewinnen?