Fehlerbehandlung und globale Interceptors
Behandeln Sie Anfragefehler und konfigurieren Sie Axios-Interceptoren.
Fehlerbehandlung und globale Interceptors ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Anfragen können fehlschlagen
Netzwerkverbindungen brechen ab, Server geben Fehler zurück und Tokens laufen ab. Robuste Apps rechnen mit solchen Fehlern und reagieren angemessen, statt abzustürzen oder Benutzer dauerhaft auf einen Spinner schauen zu lassen.
try/catch um Anfragen
Umschließen Sie erwartete Anfragen mit try/catch, um Fehler abzufangen. Axios löst einen Fehler aus, wenn der Server mit einem 4xx- oder 5xx-Status antwortet.
async fetchPosts() {
try {
const res = await api.get("/posts")
this.posts = res.data
} catch (err) {
console.error(err)
}
}Den Fehler untersuchen
Ein Axios-Fehler enthält nützliche Details. error.response ist vorhanden, wenn der Server geantwortet hat. Fehlt es, handelt es sich normalerweise um einen Netzwerk- oder Timeout-Fehler.
catch (err) {
if (err.response) {
console.log(err.response.status)
console.log(err.response.data)
} else {
console.log("Network error")
}
}Einen Fehlerzustand verfolgen
Speichern Sie eine Fehlermeldung im reaktiven Zustand, damit das Template sie für den Benutzer anzeigen kann.
data() {
return { posts: [], loading: false, error: null }
}Den Fehler setzen
Setzen Sie den Fehler vor jeder Anfrage zurück und befüllen Sie ihn anschließend im Catch-Block.
async fetchPosts() {
this.loading = true
this.error = null
try {
this.posts = (await api.get("/posts")).data
} catch (err) {
this.error = "Could not load posts. Please try again."
} finally {
this.loading = false
}
}Fehlermeldungen anzeigen
Zeigen Sie den Fehler im Template an, damit Benutzer verstehen, was schiefgelaufen ist und was sie als Nächstes tun können.
<template>
<p v-if="loading">Loading...</p>
<p v-else-if="error" class="error">{{ error }}</p>
<ul v-else>
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
</template>Was sind Interceptors?
Mit Axios-Interceptors können Sie automatisch bei jeder Anfrage oder Antwort Code ausführen. Sie eignen sich ideal für übergreifende Belange wie das Anhängen von Tokens oder die zentrale Fehlerbehandlung.
Request-Interceptors
Ein Request-Interceptor wird ausgeführt, bevor eine Anfrage gesendet wird. Verwenden Sie ihn, um global einen Authentifizierungs-Header anzuhängen.
api.interceptors.request.use(config => {
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + token
}
return config
})Response-Interceptors
Ein Response-Interceptor wird ausgeführt, nachdem eine Antwort eingetroffen ist. Er erhält zwei Callback-Funktionen: eine für erfolgreiche Antworten und eine für Fehler.
api.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// redirect to login
}
return Promise.reject(error)
}
)Globale Fehlerbehandlung
Wenn die Fehlerlogik in einem Response-Interceptor zentralisiert wird, bleiben einzelne Komponenten übersichtlich. Häufige Fälle wie 401 (Abmeldung) oder 500 (Toast anzeigen) werden an einer Stelle behandelt.
api.interceptors.response.use(
res => res,
error => {
const status = error.response ? error.response.status : null
if (status === 401) logout()
if (status >= 500) showToast("Server error, try later")
return Promise.reject(error)
}
)Einfache Wiederholungslogik
Bei instabilen Netzwerken können Sie eine fehlgeschlagene Anfrage eine begrenzte Anzahl von Malen wiederholen, bevor Sie aufgeben.
async function getWithRetry(url, retries = 2) {
try {
return await api.get(url)
} catch (err) {
if (retries > 0) {
return getWithRetry(url, retries - 1)
}
throw err
}
}Kurzer Test
Testen Sie Ihr Wissen über Fehlerbehandlung und Interceptors.
Zusammenfassung
Umschließen Sie Anfragen mit try/catch, zeigen Sie eine verständliche error-Meldung in der Benutzeroberfläche an und untersuchen Sie error.response, um Server- von Netzwerkfehlern zu unterscheiden. Interceptors zentralisieren übergreifende Belange: Request-Interceptors hängen Tokens an, Response-Interceptors behandeln globale Fehler und ein kleiner Retry-Helper erhöht die Robustheit. Als Nächstes optimieren Sie die Leistung Ihrer App.
Häufig gestellte Fragen
Ist die Lektion „Fehlerbehandlung und globale Interceptors“ kostenlos?
Ja — der vollständige Text von „Fehlerbehandlung und globale Interceptors“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Fehlerbehandlung und globale Interceptors“?
Behandeln Sie Anfragefehler und konfigurieren Sie Axios-Interceptoren. Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.
Wie lange dauert die Lektion „Fehlerbehandlung und globale Interceptors“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- HTTP-Anfragen mit Axios
- Lifecycle-Hooks und Datenabruf
- Fehlerbehandlung und globale Interceptors