Twój pierwszy fetch

Pokażę ci: fetch – zamawianie kodem

W poprzedniej lekcji otwierałeś API w przeglądarce ręcznie. Teraz to samo zrobi twój JavaScript – komendą fetch:

const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true';

const odpoved = await fetch(adresa);
const data = await odpoved.json();

console.log(data.current_weather.temperature);

Co się tu dzieje, linijka po linijce:

1. fetch(adresa) – wyślij żądanie (kelner idzie do kuchni).
2. await – poczekaj, aż wróci. Internet potrzebuje chwili!
3. odpoved.json() – zamień odpowiedź na obiekt JavaScript.
4. Potem pracujesz z danymi jak ze zwykłym obiektem: kropka, kropka, gotowe.

async function nacti() {
  // fetch and await go here
}
nacti();

Wypisz dane na stronie

Konsola jest dla programistów – odwiedzający chce widzieć dane na stronie:

<p id="teplota">Loading…</p>

<script type="module">
  const odpoved = await fetch('https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true');
  const data = await odpoved.json();

  document.querySelector('#teplota').textContent =
    `Right now it's ${data.current_weather.temperature} °C`;
</script>

Znasz to z poziomu Czarodzieja (querySelector, textContent) plus nowy fetch. Nic więcej.

Teraz ty 💪

1. Dodaj na swoją stronę akapit z id="teplota" i skrypt z przykładu powyżej.
2. Zmień współrzędne na swoje miasto.
3. Dopisz też prędkość wiatru (data.current_weather.windspeed).
4. Bonus: gdy temperatura jest poniżej 0, dodaj do tekstu „🥶 Ubierz się ciepło!”.

Co wyniesiesz z tej lekcji

• fetch(adresa) wysyła żądanie, await czeka na odpowiedź.
• .json() zamienia odpowiedź na obiekt, z którym już umiesz pracować.
• Dane z całego internetu są teraz jedną funkcją stąd.

© 2026 Ing. Martin Polak / AlgoRhino · Warunki korzystania z treści