Asynchrone foutafhandeling in composables
try/catch in asynchrone composables, foutstatus beschikbaar maken en retry-logica in useFetch.
Asynchrone foutafhandeling in composables is een gratis Vue Academy-les op CoddyKit. Dit is les 4 van 4. 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 4 lessen.
Fouten in asynchrone composables
Composables die gegevens ophalen of asynchroon werk uitvoeren, hebben hun eigen foutstrategie nodig. Het patroon: stel een error-ref beschikbaar, zodat afnemers kunnen reageren, terwijl de asynchrone functie fouten intern opvangt.
Een error-ref beschikbaar maken
Geef naast gegevens en laadstatus ook een error-ref terug. Afnemende componenten houden deze in de gaten om berichten weer te geven.
function useApi() {
const data = ref(null);
const error = ref(null);
return { data, error };
}try / catch in asynchrone functies
Wikkel binnen de asynchrone functie aangeroepen bewerkingen met await in try/catch en sla de fout op in de error-ref, in plaats van deze ongehinderd te laten opwerpen.
async function load() {
try {
data.value = await api.get();
} catch (e) {
error.value = e;
}
}De foutstatus resetten
Wis de vorige fout aan het begin van elke poging, zodat verouderde berichten niet blijven staan na een geslaagde nieuwe poging.
async function load() {
error.value = null;
try { /* ... */ } catch (e) { error.value = e; }
}Een retryCount-ref
Houd pogingen bij met een retryCount-ref om nieuwe pogingen te ondersteunen. Verhoog deze telkens wanneer je opnieuw probeert.
const retryCount = ref(0);
function retry() {
retryCount.value++;
load();
}Logica voor automatisch opnieuw proberen
Je kunt automatisch opnieuw proberen tot een limiet, met een steeds langere wachttijd tussen pogingen. Stop zodra de teller je maximum overschrijdt.
async function load() {
try {
data.value = await api.get();
} catch (e) {
if (retryCount.value < 3) {
retryCount.value++;
return load();
}
error.value = e;
}
}De volledige API teruggeven
Stel gegevens, de fout, de functie voor opnieuw proberen en retryCount beschikbaar, zodat de component alles heeft wat deze nodig heeft.
return { data, error, retry, retryCount };De fout gebruiken
Geef in de component inhoud weer op basis van de error-ref en bied een knop voor opnieuw proberen aan die aan de beschikbare functie is gekoppeld.
<p v-if="error">Failed: {{ error.message }}</p>
<button v-if="error" @click="retry">Retry</button>Foutafhandeling in composable versus globale afhandelaar
Foutafhandeling op composableniveau is bedoeld voor verwachte fouten waarop de gebruikersinterface moet reageren — een mislukte aanvraag of een validatiefout. De component bepaalt hoe je deze weergeeft.
Wanneer de globale foutgrens ingrijpt
De globale afhandelaar en foutgrenzen vangen onverwachte, niet-afgehandelde fouten op — programmeerfouten en crashes tijdens het weergeven. Ze zijn het vangnet, niet de primaire afhandelaar voor voorspelbare asynchrone fouten.
De juiste laag kiezen
Vuistregel: handel verwachte asynchrone fouten in de composable af met een error-ref; laat echt onverwachte fouten doorstromen naar de globale afhandelaar. Zo blijft feedback voor de gebruikersinterface lokaal en crashbescherming globaal.
Korte controle
Waar moeten verwachte asynchrone fouten, zoals een mislukte fetch, worden afgehandeld?
Samenvatting
Je hebt geleerd dat asynchrone composables een error-ref beschikbaar maken, try/catch in asynchrone functies gebruiken, nieuwe pogingen ondersteunen met een retryCount-ref en een functie voor opnieuw proberen, en dat fouten op composableniveau verwachte fouten afhandelen terwijl de globale afhandelaar onverwachte fouten opvangt.
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 “Asynchrone foutafhandeling in composables” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Asynchrone foutafhandeling in composables”, 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 4 lessen.
Wat leer ik in “Asynchrone foutafhandeling in composables”?
try/catch in asynchrone composables, foutstatus beschikbaar maken en retry-logica in useFetch. 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 4 van 4.
Hoe lang duurt de les “Asynchrone foutafhandeling in composables”?
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
- onErrorCaptured-lifecycle-hook
- Error Boundary-components
- app.config.errorHandler voor globale fouten
- Asynchrone foutafhandeling in composables