Gestione degli errori asincroni nei composable
try/catch nei composable asincroni, esposizione dello stato di errore, logica di retry in useFetch.
Gestione degli errori asincroni nei composable è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. 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 4 lezioni in totale.
Errori nei composable asincroni
I composable che recuperano dati o eseguono operazioni asincrone hanno bisogno di una propria strategia per gli errori. Il modello è il seguente: esponga un ref error affinché i consumer possano reagire, mentre la funzione asincrona intercetta internamente gli errori.
Esporre un ref <code>error</code>
Restituisca un ref error insieme ai dati e allo stato di caricamento. I consumer lo osservano per visualizzare i messaggi.
function useApi() {
const data = ref(null);
const error = ref(null);
return { data, error };
}try / catch nelle funzioni asincrone
All'interno della funzione asincrona, racchiuda le chiamate con await in try/catch e memorizzi l'errore nel ref error, invece di lasciarlo propagare senza essere gestito.
async function load() {
try {
data.value = await api.get();
} catch (e) {
error.value = e;
}
}Reimpostare lo stato dell'errore
Cancelli l'errore precedente all'inizio di ogni tentativo, così i messaggi obsoleti non rimangono visualizzati dopo un nuovo tentativo riuscito.
async function load() {
error.value = null;
try { /* ... */ } catch (e) { error.value = e; }
}Un ref <code>retryCount</code>
Per supportare i nuovi tentativi, tenga traccia dei tentativi con un ref retryCount. Lo incrementi ogni volta che l'utente riprova.
const retryCount = ref(0);
function retry() {
retryCount.value++;
load();
}Logica di retry automatica
Può riprovare automaticamente fino a un limite, aumentando progressivamente l'intervallo tra i tentativi. Si fermi quando il conteggio supera il valore massimo.
async function load() {
try {
data.value = await api.get();
} catch (e) {
if (retryCount.value < 3) {
retryCount.value++;
return load();
}
error.value = e;
}
}Restituire l'API completa
Esponga i dati, l'errore, la funzione di retry e retryCount, così il componente dispone di tutto ciò che gli serve.
return { data, error, retry, retryCount };Usare l'errore
Nel componente, esegua il rendering in base al ref error e offra un pulsante per riprovare collegato alla funzione esposta.
<p v-if="error">Failed: {{ error.message }}</p>
<button v-if="error" @click="retry">Retry</button>Errore del composable e gestore globale
La gestione degli errori a livello di composable serve per gli errori previsti ai quali l'interfaccia deve reagire, come una richiesta non riuscita o un errore di convalida. Spetta al componente decidere come presentarli.
Quando interviene il boundary globale
Il gestore globale e gli error boundary intercettano gli errori imprevisti e non gestiti, come i bug di programmazione e gli arresti anomali durante il rendering. Sono una rete di sicurezza, non il gestore principale degli errori asincroni prevedibili.
Scegliere il livello giusto
Regola generale: gestisca gli errori asincroni previsti all'interno del composable con un ref error; lasci che quelli realmente imprevisti risalgano fino al gestore globale. In questo modo i feedback dell'interfaccia restano locali, mentre la protezione dagli arresti anomali è globale.
Verifica rapida
Dove devono essere gestiti gli errori asincroni previsti, come una richiesta fetch non riuscita?
Riepilogo
Ha imparato che i composable asincroni espongono un ref error, usano try/catch nelle funzioni asincrone e supportano i nuovi tentativi con un ref retryCount e una funzione di retry; ha inoltre imparato che gli errori a livello di composable gestiscono i problemi previsti, mentre il gestore globale copre quelli imprevisti.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 42
- Lezioni
- 156
Domande Frequenti
La lezione «Gestione degli errori asincroni nei composable» è gratuita?
Sì — il testo completo di «Gestione degli errori asincroni nei composable» è 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 4 lezioni in totale.
Cosa imparerò in «Gestione degli errori asincroni nei composable»?
try/catch nei composable asincroni, esposizione dello stato di errore, logica di retry in useFetch. 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 4 di 4.
Quanto tempo richiede la lezione «Gestione degli errori asincroni nei composable»?
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
- Hook del ciclo di vita onErrorCaptured
- Componenti Error Boundary
- app.config.errorHandler per gli errori globali
- Gestione degli errori asincroni nei composable