Fetch API JavaScript – Guide till moderna HTTP-förfrågningar

Vad är Fetch API JavaScript?

Fetch API JavaScript är det moderna standardsättet att göra HTTP-förfrågningar direkt från webbläsaren utan externa bibliotek. Den ersatte den äldre XMLHttpRequest och erbjuder ett renare, promise-baserat gränssnitt som är mycket lättare att arbeta med. Idag är Fetch API den föredragna metoden för de flesta webbutvecklare.

Varför välja Fetch API framför XMLHttpRequest och jQuery?

XMLHttpRequest var länge standarden för asynkrona HTTP-förfrågningar, men koden blev ofta verbose och svår att läsa. jQuery förenklade detta med $.ajax(), men krävde att du laddade ett helt bibliotek. Fetch API löser båda problemen genom att erbjuda ett modernt promise-baserat API som är inbyggt i alla moderna webbläsare.

Fetch API är:

• Enklare syntax – använder promises och async/await
• Inbyggt – ingen extern dependency krävs
• Standardiserat – del av ECMAScript-standarden
• Bättre error handling – tydligare felhantering med .catch()

Fetch API vs Axios – vad säger utvecklare?

Axios är ett populärt tredjepartsbibliotek som många utvecklare fortfarande föredrar för vissa use cases. Medan Fetch API är inbyggt och tillräckligt för de flesta projekt, väljer många utvecklare Axios för större applikationer på grund av automatisk JSON-transformering och request/response-interceptors. Valet beror på projektets komplexitet – för enkla förfrågningar räcker Fetch API utmärkt.

Steg-för-steg guide: Börja med Fetch API JavaScript

Steg 1: Din första GET-förfrågan

En GET-förfrågan är den enklaste typen av HTTP-förfrågan. Här hämtar du data från en server:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fel:', error));

Detta är grundstrukturen för Fetch API JavaScript. Metoden returnerar ett Promise som löses när servern svarar. Du konverterar svaret till JSON och hanterar eventuella fel.

Steg 2: Hantera HTTP-statuskoder korrekt

En viktig detalj: Fetch API kastar inte ett fel för HTTP-felstatuskoder som 404 eller 500. Du måste kontrollera response.ok eller response.status manuellt:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP-fel! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fel:', error));

Steg 3: POST-förfrågningar med data

När du behöver skicka data till servern använder du POST-metoden. Här skickar du JSON-data:

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    namn: 'Anna',
    email: 'anna@example.com'
  })
})
  .then(response => response.json())
  .then(data => console.log('Svar:', data))
  .catch(error => console.error('Fel:', error));

Observera att du måste ange method: 'POST' och konvertera din data till JSON med JSON.stringify().

Steg 4: PUT och DELETE-förfrågningar

För att uppdatera eller radera resurser använder du PUT respektive DELETE:

// PUT – uppdatera en resurs
fetch('https://api.example.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    namn: 'Anna Andersson'
  })
})
  .then(response => response.json())
  .then(data => console.log('Uppdaterad:', data))
  .catch(error => console.error('Fel:', error));

// DELETE – radera en resurs
fetch('https://api.example.com/users/1', {
  method: 'DELETE'
})
  .then(response => response.json())
  .then(data => console.log('Raderad:', data))
  .catch(error => console.error('Fel:', error));

Steg 5: Använd async/await för renare kod

I stället för .then()-kedjor kan du använda async/await för mer läsbar kod:

async function hämtaData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP-fel! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fel:', error);
  }
}

hämtaData();

Detta är ofta den föredragna metoden för modern JavaScript-kod.

Steg 6: Lägg till headers och autentisering

Många API:er kräver autentisering eller specifika headers. Här lägger du till en Bearer-token:

fetch('https://api.example.com/protected', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE',
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fel:', error));

Steg 7: Hantera timeout och nätverksfel

Fetch API har inget inbyggt timeout, men du kan implementera det med AbortController:

const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 5000); // 5 sekunder

fetch('https://api.example.com/data', {
  signal: controller.signal
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Förfrågan timeout');
    } else {
      console.error('Fel:', error);
    }
  })
  .finally(() => clearTimeout(timeout));

Vad säger folk på Reddit och Flashback om Fetch API JavaScript?

I webbutvecklingsgemenskaper på Reddit och Flashback är konsensus tydlig: Fetch API är standardvalet för moderna projekt. Utvecklare uppskattar att det är inbyggt och inte kräver beroenden. Vanliga diskussionspunkter är att Fetch inte automatiskt kastar fel för HTTP-felstatuskoder (vilket många tycker är en gotcha), och att AbortController för timeout kan kännas verbose. Många rekommenderar async/await framför .then()-kedjor för läsbarhet. För större projekt med komplexa interceptors föredrar vissa fortfarande Axios, men för REST API-anrop och moderna webappar är Fetch API helt dominerade.

Vanliga misstag att undvika

• Glömma att kontrollera response.ok – Fetch kastar inte fel för HTTP-felstatuskoder
• Glömma JSON.stringify() – När du skickar data måste den konverteras till JSON
• Inte hantera CORS – Cross-Origin-förfrågningar kan blockeras av webbläsaren
• Inte sätta rätt Content-Type – Servern behöver veta vilket format du skickar

Sammanfattning

Fetch API JavaScript är det moderna standardsättet att göra HTTP-förfrågningar i webbutveckling. Med dess promise-baserade API och inbyggda stöd i alla moderna webbläsare behöver du inte längre externa bibliotek för enkla förfrågningar. Genom att följa denna guide kan du hantera GET, POST, PUT och DELETE-förfrågningar, implementera korrekt error handling, och skriva renare kod med async/await.

Vanliga frågor

Vilken webbläsare stöder Fetch API?

Fetch API stöds av alla moderna webbläsare (Chrome, Firefox, Safari, Edge). För Internet Explorer behöver du en polyfill.

Kan jag använda Fetch API i Node.js?

I Node.js 18+ är Fetch API inbyggt. I äldre versioner behöver du ett bibliotek som node-fetch.

Vad är skillnaden mellan Fetch API och Axios?

Fetch API är inbyggt och enklare för basala förfrågningar. Axios är ett bibliotek som erbjuder mer funktionalitet som automatisk JSON-transformering och interceptors, men kräver en dependency.