Foutafhandeling en globale interceptors
Behandel fouten in verzoeken en configureer Axios-interceptors.
Foutafhandeling en globale interceptors is een gratis Vue Academy-les op CoddyKit. Dit is les 3 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 3 lessen.
Verzoeken kunnen mislukken
Netwerkverbindingen vallen weg, servers geven fouten terug en tokens verlopen. Robuuste apps houden rekening met mislukte verzoeken en reageren er netjes op, in plaats van vast te lopen of de gebruiker eindeloos naar een laadanimatie te laten kijken.
try/catch rond verzoeken
Wikkel verzoeken waarop je wacht in try/catch om fouten op te vangen. Axios genereert een fout wanneer de server antwoordt met een 4xx- of 5xx-status.
async fetchPosts() {
try {
const res = await api.get("/posts")
this.posts = res.data
} catch (err) {
console.error(err)
}
}De fout onderzoeken
Een Axios-fout bevat nuttige details. error.response bestaat wanneer de server heeft geantwoord. Als dit ontbreekt, wijst dat meestal op een netwerkfout of time-out.
catch (err) {
if (err.response) {
console.log(err.response.status)
console.log(err.response.data)
} else {
console.log("Network error")
}
}Een foutstatus bijhouden
Sla een foutbericht op in de reactieve status, zodat het sjabloon dit aan de gebruiker kan tonen.
data() {
return { posts: [], loading: false, error: null }
}De fout instellen
Wis de fout vóór elk verzoek en vul deze vervolgens in het catch-blok in.
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
}
}Foutberichten weergeven
Toon de fout in het sjabloon, zodat gebruikers begrijpen wat er is misgegaan en wat ze vervolgens kunnen doen.
<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>Wat zijn onderscheppers?
Met Axios-onderscheppers kun je automatisch code uitvoeren bij elk verzoek of antwoord. Ze zijn ideaal voor gemeenschappelijke aandachtspunten, zoals het toevoegen van tokens of het centraal afhandelen van fouten.
Onderscheppers voor verzoeken
Een onderschepper voor verzoeken wordt uitgevoerd voordat elk verzoek wordt verstuurd. Gebruik deze om overal een authenticatiekoptekst toe te voegen.
api.interceptors.request.use(config => {
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + token
}
return config
})Onderscheppers voor antwoorden
Een onderschepper voor antwoorden wordt uitgevoerd nadat elk antwoord is binnengekomen. Deze ontvangt twee terugbelfuncties: één voor geslaagde antwoorden en één voor fouten.
api.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// redirect to login
}
return Promise.reject(error)
}
)Centrale foutafhandeling
Als je foutlogica centraliseert in een onderschepper voor antwoorden, blijven afzonderlijke componenten overzichtelijk. Veelvoorkomende gevallen, zoals 401 (uitloggen) of 500 (een melding tonen), staan dan op één centrale plek.
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)
}
)Eenvoudige logica voor opnieuw proberen
Bij onbetrouwbare netwerken kun je een mislukt verzoek een beperkt aantal keer opnieuw proberen voordat je het opgeeft.
async function getWithRetry(url, retries = 2) {
try {
return await api.get(url)
} catch (err) {
if (retries > 0) {
return getWithRetry(url, retries - 1)
}
throw err
}
}Kennischeck
Toets je kennis van foutafhandeling en onderscheppers.
Samenvatting
Wikkel verzoeken in try/catch, toon een vriendelijk error-bericht in de gebruikersinterface en bekijk error.response om serverfouten van netwerkfouten te onderscheiden. Onderscheppers centraliseren aandachtspunten: onderscheppers voor verzoeken voegen tokens toe, onderscheppers voor antwoorden handelen centrale fouten af en een kleine hulpfunctie voor opnieuw proberen maakt je app veerkrachtiger. Vervolgens optimaliseer je de prestaties van de app.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 42
- Lessen
- 156
Veelgestelde vragen
Is de les “Foutafhandeling en globale interceptors” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Foutafhandeling en globale interceptors”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 3 lessen.
Wat leer ik in “Foutafhandeling en globale interceptors”?
Behandel fouten in verzoeken en configureer Axios-interceptors. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Vue Academy te beginnen?
Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 3.
Hoe lang duurt de les “Foutafhandeling en globale interceptors”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Vue Academy?
Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- HTTP-aanvragen met Axios
- Lifecycle-hooks en data ophalen
- Foutafhandeling en globale interceptors