Frontend Academy · Lekcja

Fetch API: GET, POST, PUT, DELETE

Proszę wykonywać żądania GET za pomocą fetch, wysyłać treści JSON w żądaniach POST i PUT oraz wywoływać endpointy DELETE w celu usuwania zasobów.

Fetch API: GET, POST, PUT, DELETE to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Fetch API

fetch() to nowoczesne przeglądarkowe API do wykonywania żądań HTTP. Zwraca Promise, który rozwiązuje się do obiektu Response. Jest standardem we wszystkich nowoczesnych przeglądarkach oraz w Node.js 18+.

Podstawowe żądanie GET

Najprostsze użycie fetch — podaj adres URL, zaczekaj na odpowiedź i przeanalizuj 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 z treścią JSON

Należy użyć method, headers i body. Treść musi być ciągiem znaków — obiekt należy przekazać do JSON.stringify().

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 do pełnej aktualizacji

PUT zastępuje zasób. Należy wysłać cały obiekt — pola pominięte w żądaniu są zwykle usuwane na serwerze.

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 do częściowej aktualizacji

PATCH aktualizuje tylko wysłane pola. Należy używać go do częściowych aktualizacji zamiast PUT.

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

Żądanie DELETE

DELETE zazwyczaj nie ma treści. Odpowiedź często zwraca 204 No Content bez treści.

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
}

Nagłówki uwierzytelniania

Do chronionych endpointów należy dołączyć nagłówek Authorization.

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

Parametry zapytania w adresie URL

Ciągi zapytań należy tworzyć za pomocą URLSearchParams, aby zapewnić bezpieczne kodowanie.

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

Dlaczego fetch nie zgłasza błędów HTTP

fetch odrzuca Promise tylko w przypadku błędu sieci — odpowiedź 404 lub 500 nadal powoduje jego pomyślne rozwiązanie. Zawsze należy sprawdzać res.ok (true dla 2xx) lub res.status i samodzielnie zgłaszać błąd.

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 do anulowania

Należy anulować żądanie będące w toku, aby zapobiec wyświetleniu nieaktualnych wyników — jest to niezbędne w przypadku wyszukiwania z podpowiedziami oraz czyszczenia efektów w React.

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

Wysyłanie FormData

W przypadku przesyłania plików lub formularzy wieloczęściowych należy przekazać obiekt FormData jako body. Nie należy ustawiać Content-Type — przeglądarka doda go wraz z właściwym separatorem.

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

Szybkie sprawdzenie

Dlaczego fetch() nie zgłasza błędu, gdy serwer zwraca 404 lub 500?

Podsumowanie: Fetch API

fetch() zwraca Promise zawierający Response. Metody: GET (domyślna), POST, PUT, PATCH, DELETE. Treści JSON wymagają JSON.stringify() i nagłówka Content-Type. fetch odrzuca Promise tylko w przypadku błędu sieci — należy samodzielnie sprawdzać res.ok. URLSearchParams służy do tworzenia ciągów zapytań. AbortController służy do anulowania żądań. FormData służy do przesyłania plików (bez Content-Type — zajmuje się nim przeglądarka).

Często zadawane pytania

Czy lekcja „Fetch API: GET, POST, PUT, DELETE” jest bezpłatna?

Tak — pełny tekst „Fetch API: GET, POST, PUT, DELETE” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Fetch API: GET, POST, PUT, DELETE”?

Proszę wykonywać żądania GET za pomocą fetch, wysyłać treści JSON w żądaniach POST i PUT oraz wywoływać endpointy DELETE w celu usuwania zasobów. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Fetch API: GET, POST, PUT, DELETE”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy