PricingLoginStart free
Frontend Academy · Lektion

Hämta data vid montering

Hämta JSON från ett API inuti useEffect, lagra svaret i state och utlös hämtningen endast en gång med en tom dependency-array.

Lektion 2 av 413 steg

Hämta data vid montering är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Mönstret för datahämtning

Det vanligaste React-mönstret för datahämtning är att: 1) definiera state för loading/error/data, 2) hämta data i useEffect med tomma deps [], 3) uppdatera state i callbacken och 4) rendera baserat på state.

Fullständigt exempel

Ett komplett exempel som hämtar användare vid montering och hanterar laddning och fel.

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>;
}

Använda async/await i useEffect

Callbacken i useEffect kan inte vara async direkt (då skulle den returnera ett Promise, vilket React skulle tolka som en städfunktion). Definiera i stället en intern async-funktion och anropa den direkt.

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();
}, []);

Kontrollera svarstatus

fetch kastar inget fel vid HTTP-fel (4xx, 5xx) – bara vid nätverksfel. Kontrollera alltid response.ok och kasta manuellt ett fel för felsvar.

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();

Hämta data när ett beroende ändras

Lägg till beroendet (till exempel ett ID från route-parametrar eller props) i effektens beroendearray. Effekten körs då igen och hämtar färska data varje gång beroendet ändras.

const { userId } = useParams();

useEffect(() => {
  if (!userId) return;
  setLoading(true);
  fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(setUser)
    .finally(() => setLoading(false));
}, [userId]);

POST-förfrågningar i effekter

Effekter kan även skicka POST/PUT/DELETE-förfrågningar, men dessa utlöses vanligtvis av händelser (formulärinskickning eller knapptryckning), inte av effekter vid montering. Använd effekter för datahämtning och händelsehanterare för mutationer.

Anpassad useFetch-hook

Extrahera mönstret för fetch, laddning och fel till en anpassad hook så att det kan återanvändas i flera 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 };
}

Parsa JSON säkert

Omslut alltid res.json() med try/catch – felaktig JSON kastar ett SyntaxError. Den yttre catch-satsen hanterar det, men om du känner till källan blir felsökningen enklare.

Konfigurera API:ets bas-URL

Hårdkoda inte API-URL:er. Använd miljövariabler (import.meta.env.VITE_API_URL) för bas-URL:en. Skapa en central api.ts-fil med en konfigurerad 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å över till React Query

Manuella fetch-mönster fungerar i enkla fall. När du behöver cachning, bakgrundshämtning, paginering eller mutationer bör du gå över till React Query (TanStack Query) – det hanterar alla dessa mönster på ett tillförlitligt sätt.

Visa ett laddningsskelett

Visa ett skelettgränssnitt som motsvarar formen på det laddade innehållet i stället för en spinner. Det minskar den upplevda laddningstiden och förhindrar layoutförskjutningar.

Snabbkontroll

Varför kan du inte göra en callback i useEffect direkt async?

Besvara frågan i den interaktiva lektionen

Sammanfattning: datahämtning i useEffect

Definiera state för loading/error/data. Hämta data i useEffect med tomma deps []. Definiera en intern async-funktion – gör inte callbacken async. Kontrollera alltid res.ok. Lägg till URL/ID i deps för dynamisk datahämtning. Extrahera mönstret till en anpassad useFetch-hook för återanvändning. Överväg TanStack Query för datahämtning i produktion.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
41
Lektioner
163
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Hämta data vid montering” gratis?

Ja – hela texten till ”Hämta data vid montering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Hämta data vid montering”?

Hämta JSON från ett API inuti useEffect, lagra svaret i state och utlös hämtningen endast en gång med en tom dependency-array. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?

Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Hämta data vid montering”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Frontend Academy-lektionen?

Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Grunderna i useEffect: beroenden och städning
  2. Hämta data vid montering
  3. Hantera loading- och error-tillstånd
  4. AbortController för städning
← Tillbaka till Frontend Academy