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.
Łukasz
Podziel 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.
Przeczytaj także
Bezpieczeństwo w kodzie JavaScript?
Bezpieczeństwo kodu JavaScript to zasady takie jak autoryzacja i uwierzytelnianie, a także skuteczne mechanizmy szyfrowania danych.
Dodanie unikalnych elementów do tablicy
Lista elementów na stronie wymaga niekiedy przechowywania ich w tablicy z racji ilości danych. Może oczywiście zdarzyć się tak, że elementy będą się powtarzać, lub użytkownik będzie miał możliwość dodawania własnych.
Package.json – co to jest i z czego się składa?
Plik package.json jest podstawą systemu Node.js, który zawiera kompletne informacje na temat projektu. Od nazwy projektu, przez warunki licencyjne, aż po użyte pakiety potrzebne do zbudowania działającej wersji projektu.