Passo 3: Buscando de verdade com fetch
Chegou a hora de sair da sua máquina: um fetch de verdade, assíncrono, trazendo um endereço real de um CEP válido.
Estudar esta lição interativa →Com o CEP validado, a função buscarEndereco(cep) monta a URL ("https://viacep.com.br/ws/" + cep + "/json/") e faz o pedido de verdade: await fetch(url) viaja até o servidor da ViaCEP, e await resposta.json() transforma o texto que volta em um objeto JavaScript que seu código consegue ler. Os dois await só funcionam porque buscarEndereco é declarada com async, exatamente como você viu no Módulo 8 do curso de JavaScript.
Antes mesmo do fetch começar, a área de resultado mostra "Buscando..." (o estado de carregamento): sem esse aviso, a pessoa usando o app ficaria olhando para uma tela parada, sem saber se algo está acontecendo ou se travou. E porque uma requisição pode falhar de verdade (sem internet, servidor fora do ar), tudo isso mora dentro de um try/catch: se o fetch não conseguir nem completar a viagem, o catch mostra uma mensagem honesta em vez de quebrar o app.
Há um segundo cuidado, logo depois do fetch: if (!resposta.ok). O fetch só rejeita quando a viagem falha; se o servidor responde com um problema (por exemplo, status 400 para um CEP malformado, ou 500), a resposta chega normalmente e o .json() tentaria ler uma página de erro como se fosse dado. A propriedade resposta.ok vale false nesses casos, e o código mostra uma mensagem em vez de seguir adiante.
Mais dois cuidados de quem faz pedidos pela rede. O botão fica desabilitado enquanto a busca está em andamento: sem isso, dois cliques seguidos disparam duas buscas, e a resposta mais lenta pode chegar por último e sobrescrever a mais recente (uma condição de corrida). E o fetch ganha um prazo, { signal: AbortSignal.timeout(8000) }, para a tela não ficar presa em "Buscando..." se o servidor nunca responder. O bloco finally reabilita o botão aconteça o que acontecer.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Digite um CEP válido de verdade (ex.: 01310930) e clique em Buscar. Requer internet.
Repare que o endereço aparece na tela com createElement e textContent, e não montando uma string de HTML com innerHTML. O motivo: o endereço vem de um servidor que não é seu. Com innerHTML, se algum campo trouxesse algo como <img src=x onerror="...">, o navegador trataria isso como HTML de verdade e rodaria o código (a falha chamada XSS). Com textContent, tudo que chega é só texto: o pior que pode acontecer é aparecer um texto esquisito. Vale como regra para qualquer dado de API, de formulário ou de armazenamento (a lição de DOM do curso de JavaScript explica com calma).
Pense no fetch como enviar uma carta e esperar a resposta pelo correio: você não trava parado esperando, mas também não pode fingir que a resposta já chegou antes da hora. O await é o "aguarde a resposta chegar antes de continuar esta função", sem travar o resto da página enquanto isso.