Eine kurze Diskussion über die Lösung von Axios zum Entfernen doppelter Anfragen

// axios.js
const ausstehend = neue Map()
/**
 * Anfrage hinzufügen * @param {Object} config
 **/
const addPending = (Konfiguration) => {
  Konstanten-URL = [
    Konfigurationsmethode,
    konfiguration.url,
    qs.stringify(Konfigurationsdaten)
  ].verbinden('&')
  if (pending.has(url)) { // Wenn eine aktuelle Anfrage aussteht, brechen Sie die nachfolgende Anfrage ab config.cancelToken = new axios.CancelToken(cancel => cancel(`Doppelte Anfragen werden aktiv abgefangen: ${url}`))
  } else { // Wenn die aktuelle Anfrage nicht im Wartestatus vorhanden ist, fügen Sie sie hinzu config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
      ausstehend.festlegen(URL, Abbrechen)
    })
  }
}
/**
 * Anfrage entfernen * @param {Object} config
 */
const removePending = (Konfiguration) => {
  Konstanten-URL = [
    Konfigurationsmethode,
    config.url.replace(config.baseURL, ''), // Die Antwort-URL fügt den Domänennamen hinzu, der entfernt werden muss, um mit der Anforderungs-URL übereinzustimmen. qs.stringify(JSON.parse(config.data)) // Muss mit der Anforderungsparameterstruktur übereinstimmen, die Anforderung ist ein Objekt und die Antwort ist eine Zeichenfolge].join('&')
  if (pending.has(url)) { // Wenn die aktuelle Anforderungskennung im Status „pending“ vorhanden ist, brechen Sie die aktuelle Anforderung ab und entfernen Sie „pending.delete(url)“.
  }
}

/* globale Axios-Anforderungsparametereinstellungen, Anforderungs-Interceptor*/
axios.interceptors.request.use(
  Konfiguration => {
    addPending(config) // Füge die aktuelle Anfrage zur ausstehenden Return-Konfiguration hinzu
  },
  Fehler => {
    returniere Promise.reject(Fehler)
  }
)
// Antwort-Interceptor ist Ausnahmebehandlung axios.interceptors.response.use(
  Antwort => {
    removePending(response.config) // Nachdem die Anfrage abgeschlossen ist, entfernen Sie die Antwort dieser Anfrage
  },
  err => {
    wenn (err && err.config) {
      removePending(err.config) // Nachdem die Anfrage abgeschlossen ist, entfernen Sie diese Anfrage}
    returniere Promise.resolve(err.response)
  }
)

// axios.js
/**
 * Ausstehende Anfragen löschen (wird beim Routing von Umleitungen aufgerufen)
 */
exportiere const clearPending = () => {
  für (const [URL, Abbrechen] von ausstehend) {
    Abbrechen (URL)
  }
  ausstehend.löschen()
}

// router.js
router.beforeEach((bis, von, weiter) => {
  //Routensprung, alle Anfragen löschen clearPending()
  })