Felhantering och globala interceptorer
Hantera fel i förfrågningar och konfigurera Axios-interceptorer.
Felhantering och globala interceptorer är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 3 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 3 lektioner.
Anrop kan misslyckas
Nätverk går ner, servrar returnerar fel och tokens löper ut. Robusta appar räknar med att fel kan uppstå och reagerar smidigt i stället för att krascha eller lämna användaren med en laddningsindikator som visas för alltid.
try/catch runt anrop
Omge awaitade anrop med try/catch för att fånga fel. Axios kastar ett fel när servern svarar med statuskoden 4xx eller 5xx.
async fetchPosts() {
try {
const res = await api.get("/posts")
this.posts = res.data
} catch (err) {
console.error(err)
}
}Inspektera felet
Ett Axios-fel innehåller användbar information. error.response finns när servern har svarat, medan frånvaron av det vanligtvis betyder att det har uppstått ett nätverksfel eller timeout.
catch (err) {
if (err.response) {
console.log(err.response.status)
console.log(err.response.data)
} else {
console.log("Network error")
}
}Spåra ett feltillstånd
Spara ett felmeddelande i reaktivt state så att templaten kan visa det för användaren.
data() {
return { posts: [], loading: false, error: null }
}Ange felet
Nollställ felet före varje anrop och fyll sedan i det i catch-blocket.
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
}
}Visa felmeddelanden
Visa felet i templaten så att användarna förstår vad som gick fel och vad de ska göra härnäst.
<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>Vad är interceptors?
Med Axios-interceptors kan du automatiskt köra kod för varje anrop eller svar. De passar utmärkt för övergripande funktioner som att lägga till tokens eller hantera fel på en central plats.
Request-interceptors
En request-interceptor körs innan varje anrop skickas iväg. Använd den för att globalt lägga till en auth-header.
api.interceptors.request.use(config => {
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + token
}
return config
})Response-interceptors
En response-interceptor körs efter att varje svar har kommit fram. Den tar emot två callback-funktioner: en för lyckade svar och en för fel.
api.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// redirect to login
}
return Promise.reject(error)
}
)Global felhantering
När felhanteringen centraliseras i en response-interceptor förblir de enskilda komponenterna rena. Vanliga fall som 401 (logga ut) eller 500 (visa en toast) hanteras på en enda plats.
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)
}
)Enkel logik för nya försök
Vid instabila nätverk kan du försöka göra om ett misslyckat anrop ett begränsat antal gånger innan du ger upp.
async function getWithRetry(url, retries = 2) {
try {
return await api.get(url)
} catch (err) {
if (retries > 0) {
return getWithRetry(url, retries - 1)
}
throw err
}
}Snabbtest
Testa dina kunskaper om felhantering och interceptors.
Sammanfattning
Omge anrop med try/catch, visa ett begripligt error-meddelande i gränssnittet och inspektera error.response för att skilja serverfel från nätverksfel. Interceptors centraliserar övergripande funktioner: request-interceptors lägger till tokens, response-interceptors hanterar globala fel och en liten retry-hjälpfunktion gör appen mer motståndskraftig. Nu ska du optimera appens prestanda.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Felhantering och globala interceptorer” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Felhantering och globala interceptorer”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Felhantering och globala interceptorer”?
Hantera fel i förfrågningar och konfigurera Axios-interceptorer. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 3.
Hur lång tid tar lektionen ”Felhantering och globala interceptorer”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- HTTP-förfrågningar med Axios
- Livscykelhakar och datahämtning
- Felhantering och globala interceptorer