Hente data ved mount
Hent JSON fra et API inne i useEffect, lagre svaret i state, og utløs hentingen bare én gang med et tomt avhengighetsarray.
Hente data ved mount er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Mønsteret for datahenting
Det vanlige mønsteret for datahenting i React er: 1) definer loading-, error- og data-state, 2) hent data i useEffect med tom avhengighetsarray [], 3) oppdater state i tilbakekallingsfunksjonen, 4) rendrer basert på state.
Fullstendig eksempel
Et komplett eksempel som henter brukere ved montering, med håndtering av lasting og feil.
interface User { id: number; name: string; email: string; }
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => setUsers(data))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}Bruke async/await i useEffect
Tilbakekallingen til useEffect kan ikke være async direkte (da ville den returnert en Promise, som React ville tolket som en oppryddingsfunksjon). Definer i stedet en intern async-funksjon og kall den umiddelbart.
useEffect(() => {
async function fetchUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
setUsers(data);
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);Kontrollere svarstatus
fetch kaster ikke en feil ved HTTP-feil (4xx, 5xx) — bare ved nettverksfeil. Kontroller alltid response.ok, og kast manuelt en feil for feilsvar.
const res = await fetch('/api/data');
if (!res.ok) {
// Could also use res.status for specific handling
throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();Hente data når en avhengighet endres
Legg avhengigheten, for eksempel en ID fra ruteparametere eller props, til effektens avhengighetsarray. Effekten kjører på nytt og henter oppdaterte data hver gang avhengigheten endres.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);POST-forespørsler i effekter
Effekter kan også sende POST/PUT/DELETE-forespørsler, men disse utløses vanligvis av hendelser (skjemainnsending eller knappetrykk), ikke av effekter ved montering. Bruk effekter til lasting av data og hendelsesbehandlere til mutasjoner.
Egendefinert useFetch-hook
Trekk ut mønsteret med fetch, loading og error til en egendefinert hook, slik at det kan gjenbrukes på tvers av komponenter.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
.then(setData)
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}Analysere JSON på en trygg måte
Omslutt alltid res.json() med try/catch — ugyldig JSON utløser en SyntaxError. Den ytre catch-blokken håndterer den, men det er nyttig å kjenne kilden når du feilsøker.
Konfigurere API-bas URL
Ikke hardkod API-URL-er. Bruk miljøvariabler (import.meta.env.VITE_API_URL) for basis-URL-en. Opprett en sentral api.ts-fil med en konfigurert fetch-wrapper.
const API_BASE = import.meta.env.VITE_API_URL;
async function apiFetch<T>(path: string): Promise<T> {
const res = await fetch(`${API_BASE}${path}`, {
headers: { 'Authorization': `Bearer ${getToken()}` }
});
if (!res.ok) throw new Error(`API error ${res.status}`);
return res.json();
}Når du bør gå over til React Query
Manuelle fetch-mønstre fungerer i enkle tilfeller. Når du trenger bufring, bakgrunnshenting, paginering eller mutasjoner, bør du gå over til React Query (TanStack Query) — det håndterer alle disse mønstrene på en pålitelig måte.
Vise et lasteskjelett
Vis et skjelettgrensesnitt som samsvarer med formen på det innlastede innholdet, i stedet for en spinner. Dette reduserer den opplevde ventetiden og hindrer layoutforskyvning.
Rask kontroll
Hvorfor kan ikke en useEffect-tilbakekalling være async direkte?
Oppsummering: Datahenting i useEffect
Definer loading-, error- og data-state. Hent data i useEffect med tom avhengighetsarray []. Definer en intern async-funksjon — ikke gjør tilbakekallingen async. Kontroller alltid res.ok. Legg URL eller ID til i avhengighetene for dynamisk datahenting. Trekk ut mønsteret til en useFetch-hook for gjenbruk. Vurder TanStack Query for datahenting i produksjon.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «Hente data ved mount» gratis?
Ja – hele teksten i «Hente data ved mount» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Hente data ved mount»?
Hent JSON fra et API inne i useEffect, lagre svaret i state, og utløs hentingen bare én gang med et tomt avhengighetsarray. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Hente data ved mount»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- useEffect-grunnlag: avhengigheter og opprydding
- Hente data ved mount
- Håndtere loading- og error-state
- AbortController for opprydding