Vue3 verwendet Axios Interceptor zum Drucken von Front-End-Protokollen

1. Einleitung

Oft müssen wir das Frontend debuggen, also die Interaktion zwischen den Frontend- und Backend-Schnittstellen debuggen. Die übliche Methode ist ein Protokoll, z. B. console.log („Protokollinhalt“).

Für eine einzelne Methode ist diese Methode eigentlich in Ordnung, aber für mehrere Schnittstellen und Methoden ist diese Debugging-Methode etwas schlechter. Außerdem haben Methoden eine Ausführungsreihenfolge, die sich manchmal auf das Debugging auswirkt.

2. Verwenden Sie Axios Interceptor, um Front-End-Protokolle zu drucken

Dies ist eine eher empfohlene Methode, d. h., schreiben Sie es einmal und Sie müssen nicht jedes Mal console.log schreiben.

Plötzlich fiel mir ein Satz ein, den ich bei Tests oft sah:

Auf das Testen kommt es an

Um diesen Satz anders auszudrücken: Es dreht sich alles um die Fehlerbehebung.

1. Ändern Sie main.ts

Ändern Sie main.ts und fügen Sie den folgenden Inhalt hinzu:

html
/**
 * Axios-Abfangjäger */
axios.interceptors.request.use(Funktion (Konfiguration) {
  console.log('Anforderungsparameter:', config);
  Konfiguration zurückgeben;
}, Fehler => {
  returniere Promise.reject(Fehler);
});
axios.interceptors.response.use(Funktion (Antwort) {
  console.log('Ergebnis zurückgeben:', Antwort);
  Antwort zurückgeben;
}, Fehler => {
  console.log('Fehler zurückgeben:', Fehler);
  returniere Promise.reject(Fehler);
});

2. Löschen Sie alle console.log im Home

3. Neu kompilieren und erneut starten

Überprüfen Sie die Ergebnisse wie unten gezeigt:

Dies ist das Ende dieses Artikels über Vue3, das Axios Interceptor verwendet, um Front-End-Protokolle zu drucken. Weitere relevante Informationen zu Vue3, das Axios Interceptor verwendet, um Front-End-Protokolle zu drucken, 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!