🚀 Capítulo 18: Fetch API
🎯 Objetivo da Aula
Ao final desta aula, você saberá como usar o comando fetch para buscar dados na internet e mostrá-los na tela usando manipulação do DOM.
🏢 O Cenário Prático (Seu Desafio)
Você precisa buscar a lista de naves reais do universo de Star Wars e mostrá-las na tela! Usaremos a API pública swapi.dev.
🧠 Fundamentos: A Teoria Traduzida
O fetch() busca os dados. Depois que os dados chegam (como JSON), nós usamos o createElement e o appendChild que aprendemos lá atrás para colocar os dados na tela.
📖 Exemplo Guiado: Buscando Naves
<button id="buscar">Buscar Naves</button>
<ul id="lista"></ul>const botao = document.querySelector('#buscar');
const lista = document.querySelector('#lista');
botao.addEventListener('click', async () => {
const resposta = await fetch('https://swapi.dev/api/starships/');
const dados = await resposta.json();
dados.results.forEach(nave => {
const li = document.createElement('li');
li.innerText = nave.name;
lista.appendChild(li);
});
});🛠️ Prática Obrigatória 1
Adicione uma mensagem de “Carregando…” antes do fetch e remova-a quando os dados chegarem.
🛠️ Prática Obrigatória 2
Mostre também o modelo da nave ao lado do nome.
🔑 Gabarito de Código/Fórmulas
Prática 2:
li.innerText = `${nave.name} (Modelo: ${nave.model})`;