Como usar JavaScript fetch() [Guia para iniciantes]
O básico para buscar dados de uma API usando comunicação assíncrona
🌤 Demonstração ao vivo
Buscando temperatura...
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exibir Temperatura</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
background-color: #f0f0f0;
}
#weather {
font-size: 1.5rem;
color: #333;
}
</style>
</head>
<body>
<h1>Temperatura atual em Tóquio</h1>
<p id="weather">Obtendo temperatura...</p>
<script>
async function getWeather() {
try {
const res = await fetch("https://api.open-meteo.com/v1/forecast?latitude=35.6895&longitude=139.6917¤t_weather=true");
const data = await res.json();
const temp = data.current_weather.temperature;
document.querySelector("#weather").textContent = `Temperatura em Tóquio: ${temp}℃`;
} catch (e) {
document.querySelector("#weather").textContent = "🌧 Falha ao obter os dados";
console.error("Erro:", e);
}
}
getWeather();
</script>
</body>
</html>
🧩 Usando fetch e Lidando com Problemas Comuns
A função fetch() é um recurso moderno do JavaScript que simplifica a comunicação com APIs. Como mostrado no exemplo com a API do tempo, é possível obter dados de forma assíncrona de uma URL e exibi-los na tela com poucas linhas de código.
Por exemplo, você pode usar const res = await fetch(...) para fazer a requisição, seguido por const data = await res.json() para converter a resposta para o formato JSON. Esse padrão é comum em integrações com APIs.
🚨 Erros Comuns e Como Tratá-los
Se a URL estiver incorreta ou houver problemas de rede, é possível capturar os erros com um bloco try...catch e exibir uma mensagem como “Falha ao obter os dados” para melhorar a experiência do usuário.
Para dados em tempo real, como atualizações climáticas, é possível combinar fetch() com setInterval() para atualizar as informações periodicamente.
Lembre-se de que algumas APIs exigem uma chave de acesso. Nesse caso, consulte a documentação oficial e adicione ?apikey=sua_chave à URL conforme necessário.