So verwenden Sie Axios, um mehrere wiederholte Anfragen in einem Projekt zu filtern

  // ein Versprechen
  lass das Versprechen auflösen
  let p = neues Versprechen((lösen, ablehnen) => {
    resolvePromise = lösen
  })
  // Dies führt resolvePromise() extern aus

    CancelToken.source = Funktion Quelle() {
    var abbrechen;
    // 
    var token = neues CancelToken(Funktion Executor(c) {
        abbrechen = c;
    });
    zurückkehren {
        Zeichen: Zeichen,
        abbrechen: abbrechen,
    };

    //Eine globale Karte deklarieren
    const pendingHttp = neue Map()
    // In Axios integrierte CancelToken-Klasse const CancelToken = axios.CancelToken
       
    Funktion addApi (Konfiguration) {
      config.cancelToken = neues CancelToken((abbrechen) => {
        const url = konfiguration.url
        console.log(pendingHttp)
        wenn (!pendingHttp.has(url)) {
          pendingHttp.set(url, abbrechen)
        }
      })
    }

    Funktion cancelApi (Konfiguration) {
      const url = konfiguration.url
      if (pendingHttp.has(url)) { // Wenn die aktuelle Anforderungskennung im ausstehenden Zustand vorhanden ist, müssen Sie die aktuelle Anforderung abbrechen und const cancel = pendingHttp.get(url) entfernen.
        Abbrechen (URL + „abgebrochen“)
        pendingHttp.delete(url) // Cache der aktuellen URL leeren}
    }

    httpService.interceptors.request.use(config => {

      cancelApi(Konfiguration)
      addApi(Konfiguration)
      
      // Beim lokalen Debuggen handelt es sich um eine domänenübergreifende Situation und das Hinzufügen eines Anforderungsheaders unterliegt Einschränkungen (der Projektcode ist hier irrelevant).
      const { headers = {} } = konfiguration; const { globalObj = {} } = fenster
      Objekt.assign(headers, globalObj, { from })
      
      Konfiguration zurückgeben
    }, Fehler => {
      console.log(Fehler)
      returniere Promise.reject(Fehler)
    })

    httpService.interceptors.response.use(
      Antwort => {
        cancelApi(response.config)
        sentryCatchApi (Antwort)
      },
      Fehler => {
        // Anforderungs-Timeoutif (error.message.includes('timeout')) { // Bestimmen Sie, ob die Anforderungsausnahmeinformationen die Timeout-Zeichenfolge enthalten: Toast.error({ text: 'Timeout der Webseitenanforderung, bitte aktualisieren und erneut versuchen~' })
        }
        sentryCatchApi(Fehler)
        returniere Promise.reject(Fehler)
      }
    )

    // Nehmen wir an, dass unsere Fehlermethode wie folgt gekapselt ist. Werfen wir einen Blick auf sentryCatchApi
    Fehler => {
      sentryCatchApi(Fehler)
      returniere Promise.reject(Fehler)
    }
  // Weil diese Methode ein Objekt empfangen muss, aber wenn wir die Anforderung abbrechen, wird eine Zeichenfolge zurückgegeben und ein Fehler gemeldet.
  Funktion sentryCatchApi (res) {
      versuchen {
        res = res || {}
        const resData = res.data || {}
        Sentry.captureException(JSON.stringify(resData))
        konsole.log(`
          Daten konnten nicht abgerufen werden:
          Bitte öffnen Sie die Adresse der Webansicht im Browser und fügen Sie sie ein, um die Fehlerbehebung zu erleichtern: Informationen zur Schnittstelle:
          Schnittstellenadresse: ${res.config.url},
          Rückgabewert der Schnittstelle: Code: ${resData.code},
          Nachricht:${resData.message},
          Daten: ${JSON.stringify(resData.data)}
        `)
      } fangen (Fehler) {
        console.error(fehler)
      }
    }

   Fehler => {
    if (axios.isCancel(error)) return console.log('Die Anfrage wurde abgebrochen', error.message)
    sentryCatchApi(Fehler)
    returniere Promise.reject(Fehler)
  }