Fetch w JavaScript: Jak to działa?

Metoda Fetch w JavaScript to nowoczesne i efektywne rozwiązanie do wykonywania żądań HTTP. Jest ono zbudowane wokół obietnic, co pozwala na asynchroniczne operacje, a tym samym na nieblokujące działanie programu. Zupełnie zastępuje starszą metodę XMLHttpRequest i oferuje szereg zaawansowanych funkcji, takich jak przesyłanie i odbieranie blobów. Dzięki temu możemy odczytywać dane w różnych formatach - od tekstu po dane binarne. Należy jednak pamiętać, że mimo wielu zalet, ma pewne ograniczenia. Jednym z nich jest fakt, że nie jest obsługiwana przez wszystkie przeglądarki. Istotnym jest również zrozumienie tego, że domyślnie Fetch nie wysyła ani nie odbiera plików cookie. Aby to zmienić, należy w konfiguracji żądania dodać odpowiednią opcję.

Podstawy Fetch API: proste zapytanie GET

Fetch API to nowoczesny interfejs umożliwiający realizację zapytań HTTP w języku JavaScript. Najprostszym rodzajem zapytania jest metoda GET. W praktyce użycie Fetch API do wykonania prostej metody GET wygląda następująco: 'fetch('https://adres-api.com')'. Po wykonaniu zapytania, zwróci obietnicę (Promise) z odpowiedzią serwera. W celu przechwycenia i przetwarzania odpowiedzi, stosujemy metody .then i .catch - pierwsza służy do obsługi poprawnej odpowiedzi, druga do obsługi błędów. Choć Fetch API oferuje duże możliwości, sama obsługa zapytań jest intuicyjna i zrozumiała nawet dla osób dopiero rozpoczynających swoją przygodę z JavaScriptem.

Czy szukasz wykonawcy projektów IT ?

Sprawdź case studies

Personalizowanie zapytań Fetch: zasada działania metody POST

Fetch API w JavaScript pozwala na wysyłanie zapytań HTTP m.in. przy użyciu metody POST. Personalizowanie zapytań Fetch z użyciem metody POST polega na definiowaniu struktury i treści danych wysyłanych do serwera. Aby to zrobić, tworzymy obiekt konfiguracyjny i definiujemy pole 'method' jako 'POST'. Następnym krokiem jest określenie treści naszej wiadomości wewnątrz pola 'body'. Warto zaznaczyć, że zawartość 'body' musi być stringiem; do jej konwersji często wykorzystuje się metodę JSON.stringify(). Dzięki zastosowaniu metody POST, jesteśmy w stanie przesłać na serwer bardziej kompleksowe dane, które nie ograniczają się tylko do jednego parametru jak w przypadku metody GET.

Obsługa błędów i wyjątków w Fetch

Daje nam możliwość obsługi błędów i wyjątków. Większość błędów sieciowych (np. problemy z połączeniem, niedostępność zasobu) nie powoduje wywołania wyjątku. Wyjątek generowany jest tylko w sytuacji, gdy żądanie nie może zostać zrealizowane na skutek błędu w funkcji Fetch, np. poprzez użycie nieprawidłowej składni. W celu kontroli nad błędami warto zastosować konstrukcję try-catch do przechwytywania wyjątków i błędów w trakcie działania Fetch. Ponadto, przy obsłudze odpowiedzi serwera, dobrą praktyką jest sprawdzenie statusu odpowiedzi metoda response.ok, która zwróci true tylko w przypadku odpowiedzi z serwera o kodach od 200 do 299.

Zastosowanie praktyczne: ładowanie obrazów za pomocą Fetch

Fetch API w JavaScript umożliwia ładne i eleganckie obsługiwanie żądań HTTP. Zastosowanie Fetch do ładowania obrazów jest jednym z wielu praktycznych zastosowań tej metody. Na przykład, możemy skorzystać z Fetch do pobrania obrazu z serwera i wyświetlenia go na stronie internetowej. Aby to zrobić, po prostu używamy metody fetch z odpowiednim URL obrazu jako argumentem, a następnie, gdy obietnica jest spełniona, zwracamy odpowiedź jako bloba. Blob ten można następnie zobrazować jako URL obrazu i dodać do elementu img na stronie. Kluczowe jest zrozumienie, że Fetch API działa z obietnicami, co oznacza, że operacje są wykonywane asynchronicznie, a wyniki dostępne są tylko po ich zakończeniu.