Obsługa błędów i kodów stanu

fetch nie odrzuca obietnicy przy błędach HTTP

Sprawdzanie response.ok

const response = await fetch(url);
if (!response.ok) {
  console.log("HTTP error:", response.status);
}

Odczytywanie kodu statusu

if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");

Zgłaszanie błędu przy nieprawidłowym statusie

if (!response.ok) {
  throw new Error("Request failed: " + response.status);
}

Umieszczanie w try/catch

try {
  const res = await fetch(url);
  if (!res.ok) throw new Error("Status " + res.status);
  const data = await res.json();
} catch (err) {
  console.log("Failed:", err.message);
}

Rozróżnianie typów błędów

Odczytywanie treści błędów

if (!res.ok) {
  const errBody = await res.json().catch(() => ({}));
  throw new Error(errBody.message || ("Status " + res.status));
}

Typowe kody statusu

Wielokrotnie używany pomocnik

async function getJSON(url) {
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json();
}

Ponawianie prób przy przejściowych błędach

for (let i = 0; i < 3; i++) {
  try { return await getJSON(url); }
  catch (e) { if (i === 2) throw e; }
}

Wyświetlanie błędów użytkownikowi

getJSON(url)
  .then(render)
  .catch(() => showToast("Could not load data"));

Szybki sprawdzian

Podsumowanie