O teu primeiro fetch

Vou mostrar-te: fetch – encomendar com código

Na última lição, abriste uma API no browser à mão. Agora o teu JavaScript faz o mesmo – com o comando 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);

O que acontece aqui, linha a linha:

1. fetch(adresa) – envia o pedido (o empregado vai à cozinha).
2. await – espera que volte. A internet demora um momento!
3. odpoved.json() – converte a resposta num objeto JavaScript.
4. Depois trabalhas com os dados como qualquer objeto: ponto, ponto, feito.

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

Imprime os dados na página

A consola é para programadores – um visitante quer ver os dados na página:

<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>

Coisas familiares do Mago (querySelector, textContent) mais o novo fetch. Nada mais.

Agora és tu 💪

1. Adiciona um parágrafo com id="teplota" e o script acima ao teu site.
2. Muda as coordenadas para a tua cidade.
3. Adiciona também a velocidade do vento ao ecrã (data.current_weather.windspeed).
4. Bónus: quando a temperatura estiver abaixo de 0, adiciona «🥶 Bundle up!» ao texto.

O que ficas a saber desta lição

• fetch(adresa) envia o pedido, await espera pela resposta.
• .json() converte a resposta num objeto com que já sabes trabalhar.
• Dados de toda a internet estão agora a uma função de distância.

© 2026 Ing. Martin Polak / AlgoRhino · Condições de uso do conteúdo