Frontend Academy · leksjon

Fetch API: GET, POST, PUT og DELETE

Gjør GET-forespørsler med fetch, send JSON-bodyer i POST- og PUT-forespørsler, og kall DELETE-endepunkter for å fjerne ressurser.

Leksjon 1 av 413 trinn

Fetch API: GET, POST, PUT og DELETE er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 1 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.

Fetch-API-et

fetch() er det moderne nettleser-API-et for HTTP-forespørsler. Det returnerer et Promise som løses til et Response-objekt. Det er standard i alle moderne nettlesere og i Node.js 18+.

Grunnleggende GET-forespørsel

Den enkleste fetch-forespørselen – oppgi en URL, vent på svaret og analyser JSON.

async function fetchUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) throw new Error('HTTP ' + res.status);
  const users = await res.json();
  return users;
}

POST med JSON-innhold

Bruk method, headers og body. Body må være en tekststreng – kall JSON.stringify() på objektet.

async function createUser(user) {
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user)
  });
  if (!res.ok) throw new Error('Failed: ' + res.status);
  return res.json();
}

createUser({ name: 'Alice', email: 'alice@example.com' });

PUT for fullstendig oppdatering

PUT erstatter ressursen. Send hele objektet – felt du utelater, blir vanligvis tømt på serveren.

await fetch(`/api/users/${id}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    id, name: 'Alice', email: 'alice@example.com', role: 'admin'
  })
});

PATCH for delvis oppdatering

PATCH oppdaterer bare feltene du sender. Bruk det til delvise oppdateringer i stedet for PUT.

await fetch(`/api/users/${id}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'new@example.com' })
});

DELETE-forespørsel

DELETE har vanligvis ikke noe innhold. Svaret returnerer ofte 204 No Content uten innhold.

async function deleteUser(id) {
  const res = await fetch(`/api/users/${id}`, { method: 'DELETE' });
  if (!res.ok) throw new Error('Delete failed');
  // 204 No Content — no JSON to parse
}

Autentiseringsheadere

Legg ved en Authorization-header for beskyttede endepunkter.

const res = await fetch('/api/me', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
});

URL-spørringsparametere

Bygg spørringsstrenger med URLSearchParams for sikker koding.

const params = new URLSearchParams({
  q: 'react hooks',
  page: '2',
  pageSize: '20'
});

const res = await fetch(`/api/search?${params}`);
// /api/search?q=react+hooks&page=2&pageSize=20

Hvorfor fetch ikke kaster feil ved HTTP-feil

fetch avviser bare ved nettverksfeil – et 404- eller 500-svar blir fortsatt behandlet som vellykket. Kontroller alltid res.ok (true for 2xx) eller res.status, og kast en feil manuelt.

const res = await fetch('/api/users/999');
if (!res.ok) {
  // res.ok is false for 4xx and 5xx
  throw new Error(`Server error ${res.status}: ${await res.text()}`);
}

AbortController for avbryting

Avbryt en pågående forespørsel for å hindre foreldede resultater – viktig for typeahead-søk og opprydding i React-effekter.

const controller = new AbortController();

fetch('/api/search?q=hooks', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name !== 'AbortError') throw err;
  });

// Cancel:
controller.abort();

Sende FormData

For filopplastinger eller multipart-skjemaer sender du et FormData-objekt som body. Ikke angi Content-Type – nettleseren legger det til med riktig boundary.

const form = new FormData();
form.append('avatar', fileInput.files[0]);
form.append('name', 'Alice');

await fetch('/api/upload', { method: 'POST', body: form });
// no Content-Type header — browser sets multipart/form-data

Rask kontroll

Hvorfor kaster ikke fetch() en feil når serveren returnerer 404 eller 500?

Besvar den i den interaktive leksjonen

Oppsummering: Fetch-API-et

fetch() returnerer et Promise med Response. Metoder: GET (standard), POST, PUT, PATCH og DELETE. JSON-innhold trenger JSON.stringify() og Content-Type-header. fetch avviser bare ved nettverksfeil – kontroller res.ok manuelt. URLSearchParams brukes til spørringsstrenger. AbortController brukes til avbryting. FormData brukes til filopplastinger (ingen Content-Type – nettleseren håndterer det).

Gratis å komme i gang

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

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Fetch API: GET, POST, PUT og DELETE» gratis?

Ja – hele teksten i «Fetch API: GET, POST, PUT og DELETE» 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 «Fetch API: GET, POST, PUT og DELETE»?

Gjør GET-forespørsler med fetch, send JSON-bodyer i POST- og PUT-forespørsler, og kall DELETE-endepunkter for å fjerne ressurser. 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 1 av 4.

Hvor lang tid tar leksjonen «Fetch API: GET, POST, PUT og DELETE»?

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

← Tilbake til Frontend Academy