JavaScript Academy · Lekcja

Wysyłanie żądań GET

Proszę pobierać dane i analizować odpowiedzi JSON.

Wysyłanie żądań GET to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Działanie fetch

Fetch API umożliwia wysyłanie żądań HTTP z przeglądarki i zwraca obiekt Promise. Jest nowoczesnym zastępstwem dla starszego XMLHttpRequest.

Podstawowe żądanie GET

Należy wywołać fetch(url) z adresem URL. Domyślnie używana jest metoda GET, a wywołanie zostaje rozstrzygnięte obiektem Response.

fetch("https://api.example.com/users")
  .then((response) => {
    console.log(response.status); // 200
  });

Obiekt Response

Wartością otrzymaną po rozstrzygnięciu jest obiekt Response, a nie same dane. Zawiera on status, nagłówki i metody służące do odczytu treści. Aby uzyskać zawartość, należy wywołać metodę odczytującą treść.

fetch(url).then((response) => {
  console.log(response.ok);     // true if status 200-299
  console.log(response.status); // 200
});

Analizowanie JSON

Większość API zwraca dane w formacie JSON. Należy wywołać response.json(), które samo zwraca obiekt Promise rozstrzygany do przeanalizowanego obiektu.

fetch(url)
  .then((response) => response.json())
  .then((data) => {
    console.log(data); // parsed JS object/array
  });

Dlaczego są potrzebne dwa obiekty Promise

Pierwszy obiekt Promise zostaje rozstrzygnięty po nadejściu nagłówków, a drugi (.json()) po pobraniu i przeanalizowaniu całej treści. Dlatego należy połączyć dwa wywołania .then().

Korzystanie z async/await

W większości kodu stosuje się async/await ze względu na czytelność. Każde await wstrzymuje wykonanie do momentu rozstrzygnięcia obiektu Promise.

async function getUsers() {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

Inne metody odczytu treści

Oprócz json() treść obiektu Response można odczytać jako text(), blob() (dane binarne), arrayBuffer() lub formData(). Należy wybrać metodę odpowiednią do danych zwracanych przez serwer.

const response = await fetch(url);
const html = await response.text(); // raw string

Treść jest odczytywana tylko raz

Treść odpowiedzi jest strumieniem, który można skonsumować tylko raz. Wywołanie json(), a następnie text() dla tej samej odpowiedzi spowoduje zgłoszenie wyjątku. Jeśli naprawdę potrzebne są obie formy, należy utworzyć kopię za pomocą response.clone().

Parametry zapytania

Ciągi zapytań należy bezpiecznie tworzyć za pomocą URLSearchParams, zamiast składać je ręcznie. Metoda ta koduje za Państwa znaki specjalne.

const params = new URLSearchParams({ page: 2, q: "hello world" });
fetch("https://api.example.com/search?" + params);

Wysyłanie nagłówków

Należy przekazać drugi argument zawierający opcje. W przypadku GET często ustawia się nagłówek Accept lub token uwierzytelniający.

fetch(url, {
  headers: {
    "Accept": "application/json",
    "Authorization": "Bearer " + token
  }
});

Zwracanie obiektu Promise

Logikę fetch należy umieścić w funkcji, która zwraca obiekt Promise, aby wywołujący mógł użyć await. Dzięki temu ładowanie danych można wielokrotnie wykorzystywać w aplikacji.

function loadUser(id) {
  return fetch("/api/users/" + id).then((r) => r.json());
}

Szybki test

Żądania GET z użyciem fetch.

Podsumowanie

fetch(url) zwraca obiekt Promise dotyczący obiektu Response. Treść należy odczytywać za pomocą json(), text() lub blob() (tylko raz). Dla większej czytelności należy używać async/await, do tworzenia ciągów zapytań — URLSearchParams, a do nagłówków — obiektu opcji. Logikę warto umieszczać w funkcjach zwracających obiekt Promise, aby można było ją ponownie wykorzystywać.

Często zadawane pytania

Czy lekcja „Wysyłanie żądań GET” jest bezpłatna?

Tak — pełny tekst „Wysyłanie żądań GET” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wysyłanie żądań GET”?

Proszę pobierać dane i analizować odpowiedzi JSON. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Wysyłanie żądań GET”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Wysyłanie żądań GET
POST i wysyłanie danych
Obsługa błędów i kodów stanu
Przerywanie żądań za pomocą AbortController

← Powrót do JavaScript Academy