Przejdź do głównej zawartości
Codex13

Fetch API – podstawy użycia

O czym jest to opracowanie?

Dział zatytułowany „O czym jest to opracowanie?”

Fetch API

Fetch API to nowoczesny interfejs JavaScript do wykonywania żądań HTTP. Zastąpił przestarzały XMLHttpRequest, oferujac czystsza składnię oparta na Promise. Dzieki Fetch API możemy łatwo pobierać dane z serwerow, wysyłać formularze i komunikowac się z API REST. Jest to podstawowe narzedzie każdego frontend developera.

Dlaczego warto to znac?

Dział zatytułowany „Dlaczego warto to znac?”
  • Standard branzy - Fetch API jest natywnie wspierany przez wszystkie nowoczesne przegladarki
  • Czysta składnia - Promise i async/await daja czytelny, łatwy w utrzymaniu kod
  • Uniwersalnosc - Działa z każdym API REST, GraphQL czy innymi protokołami
  • Wymagane w pracy - Każdy projekt frontendowy wymaga komunikacji z backendem

Cel Twojego opracowania

Dział zatytułowany „Cel Twojego opracowania”
  1. Rozumiec czym jest Fetch API i jak rozni się od XMLHttpRequest
  2. Umiec wyjaśnić jak działają Promise i async/await w kontekscie fetch()
  3. Potrafic pokazac przykłady żądań GET i POST z obsługa odpowiedzi
  4. Wiedzieć jak poprawnie obsługiwać błędy i statusy HTTP

Zakres obowiazkowy

Dział zatytułowany „Zakres obowiazkowy”

Elementy merytoryczne

Dział zatytułowany „Elementy merytoryczne”

  1. Czym jest Fetch API

    • Definicja i przeznaczenie
    • Porownanie z XMLHttpRequest
    • Wsparcie przegladarek

  2. Podstawy Promise

    • Czym jest Promise
    • Metody .then() i .catch()
    • Lancuchowanie Promise

  3. Async/await

    • Nowoczesna składnia
    • Try/catch dla obsługi błędów
    • Porownanie z .then()

  4. Obsługa błędów

    • Różnica miedzy bledem sieci a bledem HTTP (404, 500)
    • Sprawdzanie response.ok
    • Informowanie użytkownika

Wymagane przykłady kodu

Dział zatytułowany „Wymagane przykłady kodu”

Przykład 1

GET request z .then() - podstawowa składnia z Promise

Przykład 2

GET request z async/await - nowoczesna składnia

Przykład 3

POST request - wysłanie danych JSON do serwera

Przykład 4

Obsługa błędów - sprawdzanie response.ok i catch

Zakres rozszerzony (dla wyzszych ocen)

Dział zatytułowany „Zakres rozszerzony (dla wyzszych ocen)”
  • Konfiguracja nagłówków (headers) w zadaniu
  • Wysyłanie FormData (multipart/form-data)
  • AbortController - przerywanie żądań
  • Timeout dla żądań fetch
  • Interceptory i wrappery fetch
  • Porownanie z bibliotekami (Axios)
  • Response streaming i ReadableStream

Proponowana struktura pracy

Dział zatytułowany „Proponowana struktura pracy”
  1. Wstep (0.5 strony) - potrzeba komunikacji klient-serwer w JS
  2. Czym jest Fetch API (1 strona) - definicja, historia, przewagi nad XHR
  3. Promise (1 strona) - podstawy asynchronicznosci w JS
  4. Async/await (1 strona) - nowoczesna składnia, przykłady
  5. Zadania GET i POST (1 strona) - przykłady kodu z omowieniem
  6. Obsługa błędów (0.5 strony) - best practices
  7. Podsumowanie (0.5 strony)
  8. Bibliografia

Pytania kontrolne

Dział zatytułowany „Pytania kontrolne”
  1. Czym rozni się Fetch API od XMLHttpRequest?
  2. Co zwraca funkcja fetch() - dane czy Promise?
  3. Dlaczego fetch() nie rzuca wyjatku dla błędów 404 lub 500?
  4. Jak sprawdzić, czy zadanie zakończyło się sukcesem?
  5. Jaka jest różnica miedzy .then()/.catch() a async/await?
  6. Jak wysłać dane JSON w zadaniu POST?

Najczestsze błędy

Dział zatytułowany „Najczestsze błędy”

Zasoby

Dział zatytułowany „Zasoby”
MDN - Fetch API Oficjalna dokumentacja Fetch API
MDN - Using Fetch Praktyczny poradnik użycia fetch()
JavaScript.info - Async/await Tutorial async/await z przykładami
web.dev - Introduction to fetch Wprowadzenie do Fetch API od Google

Do dziela!

Dział zatytułowany „Do dziela!”

To więcej niz praca zaliczeniowa

Opracowanie tego tematu to szansa, by naprawde opanowac podstawowe narzedzie pracy frontend developera. Fetch API jest używany w każdej nowoczesnej aplikacji webowej.

Wykorzystaj lekcje - konsultuj watpliwosci, pokazuj postepy! Pracuj iteracyjnie - outline -> draft -> kod -> testy w konsoli -> redakcja