Gestione degli errori e interceptor globali
Gestisca gli errori delle richieste e configuri gli interceptor di Axios.
Gestione degli errori e interceptor globali è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 3 lezioni in totale.
Le richieste possono fallire
Le connessioni di rete si interrompono, i server restituiscono errori e i token scadono. Le app robuste prevedono questi problemi e reagiscono in modo appropriato, invece di bloccarsi o lasciare l'utente a fissare un indicatore di caricamento all'infinito.
try/catch intorno alle richieste
Racchiuda le richieste precedute da await in try/catch per intercettare gli errori. Axios genera un'eccezione quando il server risponde con uno stato 4xx o 5xx.
async fetchPosts() {
try {
const res = await api.get("/posts")
this.posts = res.data
} catch (err) {
console.error(err)
}
}Analisi dell'errore
Un errore Axios contiene informazioni utili. error.response esiste quando il server ha risposto; la sua assenza indica generalmente un errore di rete o di timeout.
catch (err) {
if (err.response) {
console.log(err.response.status)
console.log(err.response.data)
} else {
console.log("Network error")
}
}Tracciamento dello stato di errore
Memorizzi un messaggio di errore nello stato reattivo, così il template può mostrarlo all'utente.
data() {
return { posts: [], loading: false, error: null }
}Impostazione dell'errore
Reimposti l'errore prima di ogni richiesta, quindi valorizzarlo nel blocco catch.
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
}
}Visualizzazione dei messaggi di errore
Mostri l'errore nel template, così gli utenti capiscono cosa è andato storto e cosa fare successivamente.
<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>Che cosa sono gli interceptor
Gli interceptor di Axios consentono di eseguire automaticamente del codice su ogni richiesta o risposta. Sono ideali per aspetti trasversali come l'aggiunta di token o la gestione centralizzata degli errori.
Interceptor delle richieste
Un interceptor delle richieste viene eseguito prima dell'invio di ogni richiesta. Lo utilizzi per aggiungere globalmente un'intestazione di autenticazione.
api.interceptors.request.use(config => {
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + token
}
return config
})Interceptor delle risposte
Un interceptor delle risposte viene eseguito dopo l'arrivo di ogni risposta. Riceve due callback: una per il successo e una per gli errori.
api.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// redirect to login
}
return Promise.reject(error)
}
)Gestione globale degli errori
Centralizzare la logica degli errori in un interceptor delle risposte mantiene puliti i singoli componenti. I casi comuni, come 401 (disconnessione) o 500 (visualizzazione di una notifica), vengono gestiti in un unico punto.
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)
}
)Logica di retry semplice
Per le reti instabili, è possibile riprovare una richiesta non riuscita per un numero limitato di volte prima di rinunciare.
async function getWithRetry(url, retries = 2) {
try {
return await api.get(url)
} catch (err) {
if (retries > 0) {
return getWithRetry(url, retries - 1)
}
throw err
}
}Verifica rapida
Verifichi la Sua conoscenza della gestione degli errori e degli interceptor.
Riepilogo
Racchiuda le richieste in try/catch, mostri nell'interfaccia un messaggio error chiaro e analizzi error.response per distinguere gli errori del server da quelli di rete. Gli interceptor centralizzano gli aspetti trasversali: gli interceptor delle richieste aggiungono i token, quelli delle risposte gestiscono gli errori globali e un piccolo helper di retry aumenta la resilienza. Ora ottimizzerà le prestazioni dell'app.
Domande Frequenti
La lezione «Gestione degli errori e interceptor globali» è gratuita?
Sì — il testo completo di «Gestione degli errori e interceptor globali» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 3 lezioni in totale.
Cosa imparerò in «Gestione degli errori e interceptor globali»?
Gestisca gli errori delle richieste e configuri gli interceptor di Axios. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.
Quanto tempo richiede la lezione «Gestione degli errori e interceptor globali»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Richieste HTTP con Axios
- Hook del ciclo di vita e recupero dei dati
- Gestione degli errori e interceptor globali