Håndtering af loading- og error-state
Tilføj variabler til loading- og error-state i komponenten, vis en spinner under hentning, og vis en venlig fejlmeddelelse ved fejl.
Håndtering af loading- og error-state er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
De tre tilstande for asynkrone data
Alle asynkrone dataoperationer har tre tilstande: indlæsning (forespørgsel undervejs), succes (data modtaget), fejl (forespørgsel mislykkedes). Din brugerflade skal håndtere alle tre eksplicit.
Indlæsningsbrugerflade
Vis en indlæsningsindikator, et skelet eller en pladsholder under indlæsningen. Forhindr, at formularen sendes igen, ved at deaktivere knapper under indlæsning. Brugeren skal altid kunne se, at appen arbejder.
if (loading) {
return (
<div className="loading-state">
<Spinner size="lg" />
<p>Loading users...</p>
</div>
);
}Fejlbrugerflade
Vis en venlig fejlmeddelelse, når en forespørgsel mislykkes. Medtag en handling til at prøve igen, så brugerne ikke går i stå. Log hele fejlen til udviklerne.
if (error) {
return (
<div className="error-state">
<p>Failed to load data: {error}</p>
<button onClick={() => setRetry(n => n + 1)}>Try Again</button>
</div>
);
}Genforsøgsmekanisme
Forøg en genforsøgstæller i tilstanden, og tilføj den til effektens afhængighedsarray. Når brugeren klikker på Prøv igen, ændres tælleren, og det udløser effekten igen.
const [retry, setRetry] = useState(0);
useEffect(() => {
// fetch...
}, [userId, retry]); // retry in deps triggers re-fetch
<button onClick={() => setRetry(n => n + 1)}>Retry</button>Bedste praksis for indlæsningstilstand
1) Vis indlæsningstilstanden med det samme ved en forespørgsel. 2) Hold indlæsningstilstanden minimal – nulstil den ikke, hvis der findes cachelagrede data. 3) Ved sideinddeling skal du skelne mellem den første indlæsning og indlæsning af flere data. 4) Vis aldrig en indlæsningsindikator i under 100 ms – tilføj en forsinkelse, eller lad de tidligere data forblive synlige.
Optimistiske opdateringer
Optimistiske opdateringer betyder, at du opdaterer brugerfladen med det samme, før serveren har bekræftet det, og derefter ruller ændringen tilbage, hvis forespørgslen mislykkes. Det giver indtryk af øjeblikkelig reaktionsevne.
// 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.');
}Fejlafgrænsninger ved gengivelsesfejl
Brug fejlafgrænsninger (klassekomponenter med componentDidCatch) til at fange fejl, der opstår under gengivelsen. De viser en reservebrugerflade i stedet for at få hele appen til at gå ned.
Omdannelse af HTTP-fejl
Omsæt HTTP-statuskoder til brugervenlige meddelelser. 401 → omdirigér til login. 403 → vis ’Adgang nægtet’. 404 → ’Ikke fundet’. 429 → ’For mange forespørgsler – vent venligst’. 500+ → ’Serverfejl – prøv igen’.
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 til kompleks hentetilstand
Når indlæsning, fejl og data påvirker hinanden (f.eks. når en fejl ryddes ved ny indlæsning), er en reducer mere overskuelig end flere useState-kald.
type FetchState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; message: string };
const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });Suspense – fremtiden
React Suspense med rammeværk til datahentning (React Query, Relay, Next.js) lader komponenter ’sætte på pause’, mens de venter på data. En overordnet Suspense-fejlafgrænsning viser automatisk en reservebrugerflade. Det er den retning, React bevæger sig i.
Netværksfejl kontra serverfejl
Netværksfejl (ingen forbindelse, CORS) udløser en fejl i catch-blokken. Serverfejl (4xx, 5xx) afsluttes normalt – du skal kontrollere res.ok for at registrere dem. Din fejlhåndtering skal håndtere begge kategorier.
Hurtigt tjek
Hvad er en ’optimistisk opdatering’?
Opsummering: Indlæsnings- og fejltilstande
Håndtér altid tilstandene indlæsning, succes og fejl. Vis en meningsfuld indlæsningsbrugerflade. Omsæt HTTP-fejl til brugervenlige meddelelser. Implementér genforsøgsmekanismer. Brug optimistiske opdateringer for øjeblikkelig oplevet feedback. Brug useReducer til koordineret hentetilstand. Suspense vil med tiden forenkle dette mønster yderligere.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Håndtering af loading- og error-state” gratis?
Ja — hele teksten til “Håndtering af loading- og error-state” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Håndtering af loading- og error-state”?
Tilføj variabler til loading- og error-state i komponenten, vis en spinner under hentning, og vis en venlig fejlmeddelelse ved fejl. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Håndtering af loading- og error-state”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- useEffect-grundlag: afhængigheder og oprydning
- Hent data ved mount
- Håndtering af loading- og error-state
- AbortController til oprydning