JavaScript fetch error – A fetch() hibakezelés leggyakoribb esetei

Hiba leírása:

A fetch() az egyik leggyakrabban használt módszer HTTP kérések küldésére JavaScript-ben. Amikor a kérés sikertelen – például nincs internetkapcsolat, elérhetetlen az API, vagy CORS hiba lép fel – a fetch() hívás elhasal.

TypeError: Failed to fetch

Ez gyakran nem „kódszintű” hiba, hanem hálózati, szerver- vagy CORS-konfigurációs probléma.

—

💥 Tipikus hibás kód

fetch('https://api.example.com/data')
  .then(res => res.json())
  .then(data => console.log(data));
// ❌ Ha az API nem elérhető → fetch error

—

✅ Megoldás

1. Használj `catch()` ágat a hibákhoz

fetch('https://api.example.com/data')
  .then(res => {
    if (!res.ok) throw new Error('Sikertelen válasz');
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('Hálózati vagy szerver hiba:', err));

2. Használj `try/catch` blokkot async/await esetén

async function loadData() {
  try {
    const res = await fetch('https://api.example.com/data');
    if (!res.ok) throw new Error('Sikertelen válasz');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error('Hiba történt:', err);
  }
}

—

🧠 Miért történik ez?

A fetch() nem dob automatikusan hibát, ha HTTP hibakódot (404, 500) kap – csak ha hálózati szintű probléma van (pl. timeout, DNS hiba, kapcsolat megszakadt, CORS). Ezért fontos az res.ok ellenőrzés is!

Lehetséges okok:

Szerver nem válaszol
API végpont hibás vagy nem elérhető
CORS szabály blokkolja a hozzáférést
Internethozzáférés megszűnt

—

🧪 Tipp fejlesztőknek

Mindig legyen .catch() ág vagy try/catch blokk
Fejlesztés közben használj devtools Network fülön figyelést
Használj alternatív eszközt teszteléshez: Postman, cURL

—

🧯 Összefoglalás

A fetch error a frontend egyik leggyakoribb problémája. Legtöbbször nem JavaScript hiba, hanem egy elérhetetlen szerver, CORS blokkolás vagy hálózati szintű probléma okozza. Korrekt hibakezeléssel és logolással elkerülhetők a félreértelmezések.