Pobieranie i wysyłanie danych w JS – metoda fetch()

Dlaczego nie jQuery.ajax() lub XMLHttpRequest?

Otóż od jakiegoś czasu staram się nie używać jQuery, oczywiście tam gdzie jest to możliwe (bo po co ładować jQuery dla jednej metody?). Dlaczego? Czysty JavaScript obecnie pozwala na dużo więcej niż jeszcze kilka lat temu.

Jak działa fetch()?

fetch() to metoda globalna, która pozwala na łatwe wykonanie zapytań sieciowych. Co warte podkreślenia, jest ona dostępna w większości nowoczesnych przeglądarek i umożliwia zarówno pobieranie, jak i wysyłanie danych. Co więcej, działa na promisach, co sprawia, że obsługa asynchronicznych zapytań jest bardziej przystępna niż kiedykolwiek.

Pobieranie danych

Zacznijmy od czegoś prostego – pobrania danych z API. Załóżmy, że chcemy uzyskać dane użytkownika z zewnętrznego API. Oto jak możemy to zrobić:

fetch('https://example.com', {
  method: 'POST', // lub np. GET, PUT, DELETE
  headers: {
    'Content-Type': 'application/json',
  },
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

W tym przykładzie fetch() wysyła zapytanie GET do podanego URL, a następnie, po otrzymaniu odpowiedzi, konwertujemy tę odpowiedź na format JSON. Na koniec, wyświetlamy dane w konsoli lub, w przypadku błędu, logujemy błąd.

Wysyłanie danych

Teraz, gdy wiemy już, jak pobierać dane, spróbujmy coś wysłać. Wykorzystując metodę POST, możemy na przykład dodać nowego użytkownika:

const userData = {
  username: 'janek',
  email: 'janek@example.com'
};

fetch('https://example.com/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(userData),
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch((error) => console.error('Error:', error));

W tym przypadku, poza podaniem URL, przekazujemy również obiekt z opcjami, w którym określamy metodę HTTP (POST), nagłówki (tutaj mówimy, że wysyłamy dane w formacie JSON) oraz ciało zapytania, czyli dane, które chcemy wysłać, przekonwertowane na łańcuch JSON.

Obsługa błędów

Kluczowym aspektem pracy z fetch() jest umiejętność obsługi błędów oraz właściwego przetwarzania odpowiedzi. Chociaż używamy catch() do łapania błędów sieciowych, ważne jest również sprawdzenie, czy odpowiedź serwera jest faktycznie tym, czego oczekujemy. Oto jak możemy to zrobić:

fetch('https://example.com')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Problem z fetch():', error));

W tym przykładzie, sprawdzamy, czy właściwość ok odpowiedzi jest prawdziwa, co oznacza, że zapytanie zostało pomyślnie przetworzone.

Kolejną kwestią, o której warto pamiętać to obsługa starszych przeglądarek za pomocą oficjalnego polyfill’a, gdyż oczywiście nasz ulubiony IE sobie nie radzi.