Omgaan met laad- en foutstatussen
Voeg variabelen voor de laad- en foutstatus aan uw component toe, toon tijdens het ophalen een spinner en geef bij fouten een duidelijke foutmelding weer.
Omgaan met laad- en foutstatussen is een gratis Frontend Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
De drie statussen van asynchrone gegevens
Elke asynchrone gegevensbewerking heeft drie statussen: laden (verzoek wordt uitgevoerd), geslaagd (gegevens ontvangen) en fout (verzoek mislukt). Je gebruikersinterface moet alle drie expliciet afhandelen.
Laadinterface
Toon tijdens het laden een laadindicator, skelet of tijdelijke aanduiding. Voorkom dat formulieren opnieuw worden verzonden door knoppen tijdens het laden uit te schakelen. De gebruiker moet altijd weten dat de app bezig is.
if (loading) {
return (
<div className="loading-state">
<Spinner size="lg" />
<p>Loading users...</p>
</div>
);
}Foutinterface
Toon een vriendelijk foutbericht wanneer een verzoek mislukt. Voeg een actie toe om opnieuw te proberen, zodat gebruikers niet vastlopen. Leg de volledige fout vast voor ontwikkelaars.
if (error) {
return (
<div className="error-state">
<p>Failed to load data: {error}</p>
<button onClick={() => setRetry(n => n + 1)}>Try Again</button>
</div>
);
}Mechanisme voor opnieuw proberen
Verhoog een teller voor nieuwe pogingen in de status en voeg deze toe aan de afhankelijkheidsarray van het effect. Wanneer de gebruiker op Opnieuw proberen klikt, verandert de teller en wordt het effect opnieuw uitgevoerd.
const [retry, setRetry] = useState(0);
useEffect(() => {
// fetch...
}, [userId, retry]); // retry in deps triggers re-fetch
<button onClick={() => setRetry(n => n + 1)}>Retry</button>Beste werkwijzen voor de laadstatus
1) Toon de laadstatus meteen bij het verzoek. 2) Houd de laadstatus minimaal — stel deze niet opnieuw in als gegevens uit de cache beschikbaar zijn. 3) Maak bij paginering onderscheid tussen de eerste keer laden en meer laden. 4) Toon nooit minder dan 100 ms lang een laadindicator — voeg een vertraging toe of laat de vorige gegevens zichtbaar.
Optimistische updates
Optimistische updates: werk de gebruikersinterface onmiddellijk bij voordat de server dit bevestigt en draai de wijziging terug als het verzoek mislukt. Dit wekt de indruk dat de app direct reageert.
// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
await deleteItem(id);
} catch (err) {
setItems(prevItems); // revert on failure
showError('Delete failed. Changes reverted.');
}Foutgrenzen voor renderfouten
Gebruik foutgrenzen (klassecomponenten met componentDidCatch) om fouten op te vangen die tijdens het renderen worden veroorzaakt. Ze tonen een alternatieve gebruikersinterface in plaats van de hele app te laten crashen.
HTTP-fouten koppelen aan berichten
Koppel HTTP-statuscodes aan gebruiksvriendelijke berichten. 401 → stuur door naar de aanmeldpagina. 403 → toon 'Toegang geweigerd'. 404 → 'Niet gevonden'. 429 → 'Te veel verzoeken — wacht even'. 500+ → 'Serverfout — probeer het opnieuw'.
function mapStatusToMessage(status: number): string {
if (status === 401) return 'Please sign in to continue';
if (status === 403) return 'You don\'t have permission to do this';
if (status === 404) return 'This item no longer exists';
if (status === 429) return 'Too many requests. Please wait a moment';
if (status >= 500) return 'Server error. We\'re looking into it';
return 'Something went wrong';
}useReducer voor een complexe laadstatus
Wanneer laden, fouten en gegevens elkaar beïnvloeden, bijvoorbeeld wanneer je een fout wist tijdens het opnieuw laden, is een reducer overzichtelijker dan meerdere aanroepen van useState.
type FetchState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; message: string };
const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });Suspense — de toekomst
Met React Suspense en frameworks voor het ophalen van gegevens, zoals React Query, Relay en Next.js, kunnen componenten 'pauzeren' terwijl ze op gegevens wachten. Een bovenliggende Suspense-foutgrens toont automatisch een alternatieve interface. Dit is de richting waarin React zich ontwikkelt.
Netwerkfout tegenover serverfout
Netwerkfouten, zoals geen verbinding of CORS, worden in het catch-blok gegooid. Serverfouten (4xx, 5xx) worden normaal afgehandeld — je moet res.ok controleren om ze te detecteren. Je foutafhandeling moet beide categorieën behandelen.
Korte controle
Wat is een 'optimistische update'?
Samenvatting: laad- en foutstatussen
Handel laad-, geslaagde en foutstatussen altijd af. Toon duidelijke laadinterfaces. Koppel HTTP-fouten aan gebruiksvriendelijke berichten. Implementeer mechanismen om opnieuw te proberen. Gebruik optimistische updates voor direct merkbare feedback. Gebruik useReducer voor gecoördineerde laadstatussen. Suspense zal dit patroon uiteindelijk verder vereenvoudigen.
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
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Omgaan met laad- en foutstatussen” gratis?
Ja — de volledige tekst van “Omgaan met laad- en foutstatussen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Omgaan met laad- en foutstatussen”?
Voeg variabelen voor de laad- en foutstatus aan uw component toe, toon tijdens het ophalen een spinner en geef bij fouten een duidelijke foutmelding weer. Je oefent met Frontend 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 Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend 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 4.
Hoe lang duurt de les “Omgaan met laad- en foutstatussen”?
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 Frontend Academy?
Ja. Elke les over Frontend 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
- useEffect-basis: dependencies en cleanup
- Data ophalen bij mounten
- Omgaan met laad- en foutstatussen
- AbortController voor cleanup