MédioFase 5
Exercício Médio — O Teu Primeiro Pedido HTTP com fetch
Usa fetch para pedir dados a uma API pública gratuita e mostrar o resultado na página.
FerramentasVS CodeNavegador
Objetivo: ver, na prática, o pedido/resposta HTTP que estudaste no tema 3 — desta vez feito pelo teu próprio código.
Passos a realizar
- Cria uma pasta pedido-http dentro de fase5, com index.html e script.js.
- No HTML, cria um botão "Nova frase" e um parágrafo vazio para mostrar o resultado.
- No script.js, escreve uma função que usa fetch("https://api.adviceslip.com/advice") para pedir uma frase de conselho aleatória a uma API pública gratuita.
- fetch devolve uma Promise — usa .then() para tratar a resposta, converte-a para JSON com .json(), e depois usa outro .then() para escrever o texto da frase no parágrafo.
- Liga a função ao evento de clique do botão, para pedires uma nova frase sempre que clicares.
- Abre o console do navegador (F12) e observa o separador "Network" enquanto clicas — confirma que vês o pedido GET real a sair e a resposta a chegar.
Fluxo de funcionamento
- 1Clique no botão
- 2fetch(url) — pedido GET
- 3Resposta chega como JSON
- 4Mostrar na página
Código de exemplo
script.js
const botao = document.querySelector("#botao-frase");
const resultado = document.querySelector("#resultado");
botao.addEventListener("click", function () {
fetch("https://api.adviceslip.com/advice")
.then((resposta) => resposta.json())
.then((dados) => {
resultado.textContent = dados.slip.advice;
});
});Dicas
- fetch é assíncrono — o resto do teu código continua a correr antes da resposta chegar, por isso o resultado só aparece dentro do .then().
- Se nada acontecer ao clicar, confirma no separador Network do DevTools se o pedido saiu mesmo e que código de estado voltou.
Erros comuns
- Tentar usar o resultado do fetch fora do .then(), antes de a resposta ter chegado.
- Esquecer o .json() intermédio — a primeira resposta do fetch ainda não é o conteúdo em si, é só o "envelope" da resposta HTTP.