Pobieranie i wysyłanie danych w JS – fetch()
Tworzenie stron internetowych wymaga danych, które zaprezentujemy na stronie. Potrzebujemy je pobrać z API REST’owego, bądź będzie nam dostarczone w formie zmiennych, np. do TWIG’a. Dzisiaj skupię się na pierwszej formie dostarczenia danych, czyli pobieranie i wysyłaniu danych asynchronicznie metodą fetch() w JavaScript.
ŁukaszPodziel się artykułem:
)
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()?
Główną zasadą działania metody fetch() jest tzw. obietnica Promise. Podczas wykonania zapytania 2 parametry do metody: adres żądania oraz zestaw opcji. W odpowiedzi otrzymujemy wspomniany Promise oraz obsługę błędów.
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);
});Trzeba pamiętać, że fetch() domyślnie nie zwróci nam statusu 404 lub 500, jedynie status 200 lub błąd w przypadku, jeśli coś uniemożliwiło wykonanie żądania.
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.
