Eine kurze Erläuterung zum Abbrechen von Anfragen und zum Verhindern doppelter Anfragen in Axios

Vorwort

In tatsächlichen Projekten müssen wir möglicherweise eine „Anti-Shake“-Verarbeitung für Anfragen durchführen. Dies dient hauptsächlich dazu, zu verhindern, dass Benutzer unter bestimmten Umständen innerhalb kurzer Zeit wiederholt auf eine Schaltfläche klicken, wodurch das Front-End wiederholt mehrere Anfragen an das Back-End sendet. Hier liste ich zwei häufige Situationen aus der Praxis auf:

• PC-Seite - Doppelklick auf die Suchschaltfläche kann zwei Suchanfragen auslösen
• Mobiles Terminal - Da es auf dem mobilen Terminal keine Klickverzögerung gibt, kann es sehr leicht zu Fehlbedienungen oder Mehrfachbedienungen kommen, was zu einer erneuten Übermittlung der Anfrage führt.

Die oben beschriebene Situation kann auch bei Vorhandensein einer Lademaske auftreten. Daher müssen wir uns überlegen, wie wir doppelte Anforderungen am Front-End verhindern können.

Kern - CancelToken

Die Kernmethode zum Abbrechen einer Anfrage in Axios ist CanelToken. Es gibt zwei Möglichkeiten, CancelToken in der offiziellen Website-Dokumentation zu verwenden. Hier ist ein einfaches Einfügen und Hinzufügen von Kommentaren

Methode 1:

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

axios.get('/Benutzer/12345', {
  //Für die Anfrage muss ein CancelToken gesetzt werden cancelToken: source.token
}).catch(Funktion (geworfen) {
  // Wenn die Anforderung abgebrochen wird, rufen Sie diese Methode auf, um zu entscheiden, ob (axios.isCancel(thrown)) {
    console.log('Anfrage abgebrochen', thrown.message);
  } anders {
    // Fehler behandeln
  }
});

// Die obige Anfrage abbrechen // source.cancel('messge') Nachricht ist optional und muss ein String sein
source.cancel('Vorgang vom Benutzer abgebrochen.');

Methode 2:

const CancelToken = axios.CancelToken;
abbrechen lassen;

axios.get('/Benutzer/12345', {
  // Erstelle ein cancelToken Objekt direkt in den Optionen cancelToken: new CancelToken(function executor(c) {
    abbrechen = c;
  })
});

// Die obige Anfrage abbrechen cancel();

Praktische Anwendungen und Verpackung

Die Kernmethoden in Axios wurden oben als Beispiele erläutert, aber in der Praxis verwenden wir sie oft nicht wie in den Beispielen auf der offiziellen Website. Stattdessen führen wir die globale Konfigurationsverwaltung im Axios-Interceptor durch. In diesem Fall müssen wir einige Änderungen am obigen Code vornehmen.

Hier ist die allgemeine Idee, die ich umgesetzt habe:

• Wir müssen alle laufenden Anfragen zwischenspeichern. Stellen Sie vor dem Einleiten einer Anforderung fest, ob die Anforderung in der Cacheliste ausgeführt wird. Wenn dies der Fall ist, brechen Sie die Anforderung ab.
• Nachdem eine Anfrage abgeschlossen ist, muss sie aus der Cache-Liste gelöscht werden, damit sie erneut gesendet werden kann.

Nachdem die Idee fertig ist, gehen wir direkt zum Code

// Liste der laufenden Anfragen let reqList = []

/**
 * Doppelte Anfragen verhindern* @param {array} reqList – Cache-Liste der Anfrage* @param {string} url – aktuelle Anfrageadresse* @param {function} cancel – Anfrage-Unterbrechungsfunktion* @param {string} errorMessage – Fehlermeldung, die angezeigt wird, wenn die Anfrage unterbrochen wird*/
const stopRepeatRequest = Funktion (Anforderungsliste, URL, Abbrechen, Fehlermeldung) {
  const errorMsg = Fehlermeldung || ''
  für (lass i = 0; i < reqList.length; i++) {
    wenn (reqList[i] === url) {
      Abbrechen(Fehlermeldung)
      zurückkehren
    }
  }
  reqList.push(URL)
}

/**
 * Erlaube die Ausführung einer Anfrage * @param {array} reqList Liste aller Anfragen * @param {string} URL-Anfrageadresse */
const allowRequest = Funktion (Anforderungsliste, URL) {
  für (lass i = 0; i < reqList.length; i++) {
    wenn (reqList[i] === url) {
      reqList.splice(i, 1)
      brechen
    }
  }
}

const service = axios.create()

//Interceptor anfordern service.interceptors.request.use(
  Konfiguration => {
 abbrechen lassen
   //Setze das cancelToken-Objekt config.cancelToken = new axios.CancelToken(function(c) {
     abbrechen = c
    })
    // Doppelte Anfragen verhindern. Wenn die vorherige Anfrage nicht abgeschlossen ist, wird die gleiche Anfrage nicht gestoppt. RepeatRequest (reqList, config.url, cancel, `${config.url}-Anfrage wird unterbrochen`)
    Konfiguration zurückgeben
  },
  err => Promise.reject(err)
)

// Antwort-Interceptor service.interceptors.response.use(
  Antwort => {
    // Erhöhen Sie die Verzögerung. Die gleiche Anfrage sollte nicht innerhalb kurzer Zeit wiederholt gesendet werden. setTimeout(() => {
      allowRequest(Anforderungsliste, Antwort.config.URL)
    }, 1000)
    // ...nachfolgende Operationen nach erfolgreicher Anfrage // successHandler(response)
  },
  Fehler => {
    wenn (axios.isCancel(geworfen)) {
      Konsole.log(geworfene.Nachricht);
    } anders {
      // Erhöhen Sie die Verzögerung. Die gleiche Anfrage sollte nicht innerhalb kurzer Zeit wiederholt gesendet werden. setTimeout(() => {
        allowRequest(Anforderungsliste, Fehler.config.url)
      }, 1000)
    }
    // ...nachfolgende Operationen nachdem die Anfrage fehlgeschlagen ist // errorHandler(error)
  }
)

Einige kleine Details

Warum haben Sie zum Festlegen des CancelToken nicht den Code aus Methode 2 oben verwendet?
In der Axios-Dokumentation gibt es einen Hinweis:

Hinweis: Sie können mehrere Anfragen mit demselben Stornierungstoken stornieren.
Sie können mehrere Anfragen mit demselben Token stornieren.

Ich möchte also nicht vor jeder Anfrage ein neues Objekt erstellen. Verwenden Sie unbedingt Methode 2, um sicherzustellen, dass jeder Abbruch korrekt ausgeführt wird. Die vorherige Methode führt dazu, dass nachfolgende Anforderungen auch nach einer Stornierung weiterhin storniert werden.

Warum müssen wir der Antwort eine Verzögerung hinzufügen?
Weil wir nicht möchten, dass Benutzer innerhalb eines sehr kurzen Zeitraums wiederholt dieselbe Anfrage stellen.
Bitte beachten Sie, dass das Blockieren von Anfragen in einer Antwort und das Blockieren von Anfragen in einer Anfrage zwei verschiedene Konzepte sind:
Die Anforderung soll verhindern, dass dieselbe Anforderung erneut gestartet wird, wenn die vorherige Anforderung nicht abgeschlossen ist.
Die Antwort verhindert, dass innerhalb eines bestimmten Zeitraums nach Abschluss der vorherigen Anfrage dieselbe Anfrage gestellt wird.

Kann ich beim Abbrechen ein Objekt übergeben, statt nur einer Nachricht?
Laut der offiziellen Schnittstelle ist dies nicht möglich. Sie können es gemäß dem offiziellen Quellcode neu verpacken, ein Plug-In eines Drittanbieters verwenden oder eine andere Methode verwenden: Konvertieren Sie das Objekt in eine JSON-Zeichenfolge und konvertieren Sie es dann bei Bedarf zurück.

Dies ist das Ende dieses Artikels zum Abbrechen von Anfragen und zum Verhindern doppelter Anfragen in Axios. Weitere Informationen zum Abbrechen von Anfragen und zum Verhindern doppelter Anfragen in Axios 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!