Axios storniert Anfragen und vermeidet doppelte Anfragen

Herkunft

Eine bestimmte Seite muss alle Daten herunterladen, die herunterzuladende Datenmenge ist groß und die Schnittstellenverzögerung ist lang ...

Das anfängliche Laden der Daten einer bestimmten Seite dauert lange, aber eine einzelne Suche ist schnell. Wenn die anfänglichen Daten geladen sind, wird die Suchoberfläche zurückgegeben, und die anschließende Rückgabe der anfänglichen Daten deckt die Anzeige der gesuchten Daten ab....

Diese Situationen erfordern von uns:

• Möglichkeit, eine Anfrage manuell abzubrechen/zu beenden.
• Einige Seitenschnittstellen können jeweils nur eine Anfrage gleichzeitig haben.

Status Quo

Das System ist eine Sekundärentwicklung basierend auf dem Open Source Vue-Element-Admin von Laoge Huakucha. Die Anfrage verwendet Axios und der Schlüsselcode der gekapselten Anfrage.js lautet wie folgt:

// eine Axios-Instanz erstellen
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // URL = Basis-URL + Anforderungs-URL
  withCredentials: true, // sende Cookies bei domänenübergreifenden Anfragen
  Timeout: 500000, // Anforderungs-Timeout
  transformRequest: [Funktion(Daten) {
    // Führe eine beliebige Konvertierung der Daten aus returniere Qs.stringify({
      ...Daten
    },
    // Array-Konvertierung { arrayFormat: 'brackets' })
  }]
})

// Interceptor anfordern
Dienst.Interceptors.Anfrage.Verwenden(
  Konfiguration => {
    // etwas tun, bevor die Anfrage gesendet wird

    wenn (store.getters.token) {
      // Jede Anfrage soll ein Token enthalten
      // ['X-Token'] ist ein benutzerdefinierter Header-Schlüssel
      // Bitte ändern Sie es entsprechend der tatsächlichen Situation
      config.headers['token'] = getToken()
    }
    Konfiguration zurückgeben
  },
  Fehler => {
    // etwas tun mit dem Anfragefehler
    console.log(error) // zum Debuggen
    returniere Promise.reject(Fehler)
  }
)

Methode zum Initiieren der Anfrage:

Exportfunktion remoteApi(Daten) {
  Rückgabeanforderung({
    URL: „/API“,
    Methode: 'post',
    Daten
  })
}

Anfrage abbrechen cancelToken

Seine offizielle Dokumentation: Abbrechen:

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.');

Geänderte Anfragemethode

Exportfunktion remoteApi(Daten, CancelToken) {
  Rückgabeanforderung({
    URL: „/API“,
    Methode: 'post',
    Token abbrechen,
    Daten
  })
}

Erstellen Sie bei einer tatsächlichen Anfrage einen CachelToken:

// In der Komponentenmethode this.cancelToken = CancelToken.source()
remoreApi(Daten, dies.cancelToken).dann(....).catch(....).finally(....)

Um eine Anfrage abzubrechen, führen Sie Folgendes aus:

// In der Komponentenmethode this.cancelToken.cancel('Download abbrechen')

Vermeidung doppelter Anfragen

Vermeiden Sie wiederholte Anfragen an eine Schnittstelle, um zu verhindern, dass die Rückgabedaten der Schnittstelle mit einer längeren Verzögerung die Rückgabedaten einer anderen Schnittstelle überschreiben und so Datenanzeigefehler verursacht werden. Die Idee ist relativ einfach: Es wird eine globale Map zum Speichern von Anforderungskennungen und entsprechenden CancelTokens verwendet. Rufen Sie vor dem Initiieren einer Anforderung die Abbruchmethode des entsprechenden Abbruchtokens gemäß der Anforderungskennung auf und geben Sie dann eine neue Anforderung aus, um die Bedingungen zu erfüllen.

Zusammenfassen

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