Der Vue Axios Interceptor verwendet häufig die wiederholte Stornierung von Anforderungen

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

axios.get('/Benutzer/12345', {
  cancelToken: Quelle.Token
}).catch(Funktion(geworfen) {
  wenn (axios.isCancel(geworfen)) {
    console.log('Anfrage abgebrochen', thrown.message);
  } anders {
     // Fehler behandeln }
});

axios.post('/Benutzer/12345', {
  Name: „Neuer Name“
}, {
  cancelToken: Quelle.Token
})

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

const CancelToken = axios.CancelToken;
abbrechen lassen;

axios.get('/Benutzer/12345', {
  cancelToken: neues CancelToken(Funktion Executor(c) {
    // Die Executor-Funktion erhält eine Abbruchfunktion als Parameter cancel = c;
  })
});

// die Anfrage abbrechen
stornieren();

Axios von „Axios“ importieren
importiere baseURL aus „./config“
importiere qs von „qs“

const pendingRequest = new Map(); // Anforderungsobjekt const CancelToken = axios.CancelToken;

axios.defaults.timeout = 30000
axios.defaults.baseURL = Basis-URL.Ziel

// Anfrage-Interceptor hinzufügen axios.interceptors.request.use(function(config) {
  // Tun Sie etwas, bevor Sie die Anfrage senden config.headers = {
      'Inhaltstyp': 'Anwendung/JSON',
      "Token": getToken()
  }
  // Den Anforderungsschlüssel abrufen
  let requestKey = getReqKey(Konfiguration);

  // Feststellen, ob es sich um eine wiederholte Anfrage handelt if (pendingRequest.has(requestKey)) { // Es handelt sich um eine wiederholte Anfrage removeReqKey(requestKey); // Abbrechen }else{
    // CancelToken setzen
    config.cancelToken = neues CancelToken(Funktion Executor(Abbrechen) {
      pendingRequest.set(requestKey, abbrechen); // setzen })
  }

  Konfiguration zurückgeben;
}, Funktion (Fehler) {
  // Anforderungsfehler return Promise.reject(error);
});

// Antwort-Interceptor hinzufügen axios.interceptors.response.use(function (response) {
  // RequestKey im Request-Objekt löschen
  let requestKey = getReqKey(response.config);
  entferneReqKey(Anforderungsschlüssel);

  // Etwas mit den zurückgegebenen Daten machen, zum Beispiel den Status abfangen if (response.data.status !== 200) {
      Toast({
        Nachricht: Antwort.Daten.Nachricht,
        Typ: "Warnung",
        Dauer: 1000
      })
      zurückkehren
    }
    
  // Kein Problem, gib die Serverdaten zurück return response.data;
}, Funktion (Fehler) {
  let requestKey = getReqKey(error.config);
  entferneReqKey(Anforderungsschlüssel);
  
  // Antwortfehler return Promise.reject(error);
});

// Den Anforderungsschlüssel abrufen
Funktion getReqKey(Konfiguration) {
  // Der von der Anforderungsmethode, der Anforderungsadresse und den Anforderungsparametern generierte String dient als Grundlage dafür, ob die Anforderung wiederholt werden soll const { method, url, params, data } = config; // Diese Parameter dekonstruieren // GET ---> params POST ---> data
  const requestKey = [Methode, URL, qs.stringify(Params), qs.stringify(Daten)].join('&');
  Anfrageschlüssel zurückgeben;
}

// Doppelte Anfrage abbrechen function removeReqKey(key) {
  const cancelToken = pendingRequest.get(Schlüssel);
  cancelToken(key); // Die zuvor gesendete Anfrage abbrechen pendingRequest.delete(key); // RequestKey im Anfrageobjekt löschen
}