Como Consumir API de CEP em JavaScript: Guia Atualizado de Front-end em

A integração de APIs (Application Programming Interfaces) é uma habilidade essencial para desenvolvedores modernos.

Uma das APIs mais comuns utilizadas em projetos web no Brasil é a API de CEP (Código de Endereçamento Postal).

Esta API permite obter informações detalhadas sobre endereços a partir de um CEP fornecido, facilitando a automação e a melhoria de experiência do usuário em formulários de cadastro e sistemas de e-commerce, entre outros.

Neste post de hoje, vamos entender como consumir API de CEP em JavaScript

Vamos abordar desde a configuração inicial do projeto até a implementação prática, utilizando tanto a abordagem com XMLHttpRequest quanto com Fetch API, uma abordagem mais moderna e recomendada.

Sumário do Artigo

Como aplicar Como Consumir API de CEP em JavaScript em projetos front-end

Este conteúdo foi revisado para ajudar o leitor a entender Como Consumir API de CEP em JavaScript com mais profundidade, sem trocar a promessa original do artigo. A ideia é ampliar contexto, exemplos, boas práticas e próximos passos para que a leitura vire prática real.

Em front-end, uma explicação boa precisa conectar interface, acessibilidade, performance, responsividade, organização de código e experiência do usuário. Não basta funcionar no navegador; a solução precisa ser clara, manutenível e agradável de usar.

Resposta rápida para orientar a leitura

Use Como Consumir API de CEP em JavaScript como parte de um raciocínio maior: qual interface você quer construir, quem vai usar, quais estados precisam existir, como o layout responde em telas diferentes e como validar se a experiência ficou boa.

O ponto principal é tratar front-end como produto, não apenas como tela. A qualidade depende de estrutura semântica, CSS sustentável, JavaScript previsível, componentes bem pensados e atenção aos detalhes de uso.

Critérios para avaliar uma solução front-end

A interface funciona bem em desktop e mobile?
A estrutura HTML ajuda acessibilidade e SEO?
O CSS está organizado e fácil de manter?
Os estados de erro, carregamento e vazio foram considerados?
A solução melhora a experiência do usuário ou apenas adiciona complexidade?

Exemplo prático de aplicação

Imagine que você quer criar uma tela simples de cadastro. Mesmo em um exemplo pequeno, é possível praticar HTML semântico, validação, estados de erro, responsividade, organização de CSS e integração com JavaScript. Esse fluxo mostra como Como Consumir API de CEP em JavaScript aparece em uma situação real.

Se o tema envolver framework, comece por um componente pequeno. Se envolver CSS, teste em diferentes tamanhos de tela. Se envolver SEO técnico, valide metadados, estrutura, performance e indexação. O importante é transformar teoria em decisão visível.

Erros comuns ao estudar front-end

Pular HTML e CSS para ir direto para frameworks.
Criar telas bonitas, mas pouco acessíveis ou difíceis de usar.
Ignorar responsividade e estados da interface.
Adicionar bibliotecas antes de entender o problema.
Copiar componentes sem revisar performance, semântica e manutenção.

Como transformar o conteúdo em prática

Escolha uma ação pequena depois da leitura: criar um componente, melhorar uma página, revisar CSS, validar acessibilidade, otimizar uma imagem, escrever um teste ou documentar uma decisão de layout. O aprendizado fica mais forte quando termina em uma ação verificável.

Para quem estuda desenvolvimento web, esse hábito evita consumo passivo. Você passa a medir se a interface ficou mais clara, mais rápida, mais acessível e mais fácil de manter.

Checklist de qualidade antes de confiar no resultado

A página funciona com teclado e leitores de tela?
O layout continua bom em telas pequenas?
Imagens, fontes e scripts não prejudicam carregamento?
O código está organizado para futuras alterações?
A experiência ficou melhor para o usuário final?

Leituras internas recomendadas

Para continuar no cluster de Front-end do Skills Tecnológicas, estes conteúdos ajudam a conectar fundamentos, frameworks, HTML, CSS, JavaScript, UX e SEO técnico:

O que é uma API de CEP?

Uma API de CEP é um serviço online que, ao receber um CEP, retorna dados associados a esse código, como rua, bairro, cidade e estado.

Existem várias APIs disponíveis, como a ViaCEP, BrasilAPI e Correios.

Para este tutorial, usaremos a ViaCEP, uma das mais populares e de fácil uso.

Para você que é iniciante e ainda não sabe o que é uma API, ela é a sigla para “Application Programming Interface” (Interface de Programação de Aplicações).

É um conjunto de definições e protocolos que permite que diferentes softwares se comuniquem entre si.

As APIs fornecem uma maneira estruturada para que os desenvolvedores interajam com um sistema, serviço ou aplicação, sem precisar entender todos os detalhes internos de como ele funciona.

Pontos importantes sobre APIs:

Abstração: APIs abstraem a complexidade do funcionamento interno de um sistema, expondo apenas as partes necessárias para interação. Isso facilita o uso de funcionalidades sem a necessidade de entender toda a lógica por trás delas.
Reutilização: APIs permitem que desenvolvedores reutilizem código existente. Em vez de escrever novas funcionalidades do zero, eles podem integrar funcionalidades já existentes através de APIs.
Interoperabilidade: APIs permitem que diferentes sistemas, escritos em diferentes linguagens e rodando em diferentes plataformas, se comuniquem de maneira eficaz. Isso é essencial para a criação de ecossistemas de software integrados.
Segurança: APIs podem fornecer acesso controlado a recursos de um sistema. Através de mecanismos como autenticação e autorização, é possível garantir que apenas usuários e sistemas autorizados possam acessar determinadas funcionalidades.
Facilidade de Integração: APIs tornam mais fácil a integração entre sistemas. Por exemplo, uma aplicação pode usar a API de um serviço de pagamento para processar transações sem precisar lidar com os detalhes de processamento de cartões de crédito.

Consumir API de CEP em JavaScript: Escolhendo a API de CEP

A escolha da API pode depender de diversos fatores, como a necessidade de suporte, confiabilidade e funcionalidades específicas.

A ViaCEP é uma excelente escolha devido à sua simplicidade e popularidade.

Ela permite consultas gratuitas de CEPs através de uma URL simples.

Consumir API de CEP em Javascript é muito útil para desenvolvedores melhorarem a experiência do usuário.

Quando o usuário preencher o CEP, será feita uma requisição para a ViaCEP, que retornará os dados do endereço com base no CEP informado.

Após receber esses dados, é possível preencher automaticamente alguns campos, como cidade e bairro.

Confira também:

Automação pessoal: tarefas que você pode organizar com tecnologia8 de julho de 2026
CSS moderno: container queries, layers e boas práticas7 de julho de 2026
Como agentes de IA tomam decisões: ferramentas, memória e contexto7 de julho de 2026

Configuração Inicial do Projeto

Para começar, vamos criar um ambiente básico de desenvolvimento web.

Precisaremos de um editor de texto, como Visual Studio Code, e de um navegador para testar nossa aplicação.

1. Criando os Arquivos Básico

Crie uma pasta para o projeto e, dentro dela, crie os seguintes arquivos:

index.html
style.css
script.js

2. Estrutura Básica do HTML:

No arquivo index.html, adicione a estrutura básica do HTML:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Consulta de CEP</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Consulta de CEP</h1>
        <form id="cepForm">
            <label for="cep">Digite o CEP:</label>
            <input type="text" id="cep" name="cep" required>
            <button type="submit">Consultar</button>
        </form>
        <div id="result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Estilos CSS Básicos

No arquivo style.css, adicione alguns estilos básicos:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 8px;
}

input, button {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

button {
    background-color: #007BFF;
    color: #fff;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#result {
    margin-top: 20px;
}

Consumindo a API de CEP com JavaScript

Vamos agora implementar a lógica em JavaScript para entendermos como consumir API de CEP em JavaScript.

Vamos explorar duas abordagens: XMLHttpRequest e Fetch API.

Usando XMLHttpRequest

1. Configurando o Script JavaScript

No arquivo script.js, adicione o seguinte código para capturar o evento de envio do formulário e fazer a requisição à API de CEP usando XMLHttpRequest:

document.getElementById('cepForm').addEventListener('submit', function(event) {
    event.preventDefault();

    var cep = document.getElementById('cep').value;

    if (cep.length !== 8) {
        alert('O CEP deve conter 8 dígitos.');
        return;
    }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', `https://viacep.com.br/ws/${cep}/json/`, true);

    xhr.onload = function() {
        if (xhr.status === 200) {
            var data = JSON.parse(xhr.responseText);
            displayResult(data);
        } else {
            alert('Erro ao consultar o CEP.');
        }
    };

    xhr.send();
});

function displayResult(data) {
    var resultDiv = document.getElementById('result');

    if (data.erro) {
        resultDiv.innerHTML = 'CEP não encontrado.';
    } else {
        resultDiv.innerHTML = `
            <p><strong>Logradouro:</strong> ${data.logradouro}</p>
            <p><strong>Bairro:</strong> ${data.bairro}</p>
            <p><strong>Cidade:</strong> ${data.localidade}</p>
            <p><strong>Estado:</strong> ${data.uf}</p>
        `;
    }
}

Usando Fetch API

A Fetch API é uma forma mais moderna e simples de fazer requisições HTTP em JavaScript.

Vamos ver como utilizá-la para consultar a API de CEP.

1. Configurando o Script JavaScript com Fetch API

Substitua o código anterior por este, utilizando a Fetch API:

document.getElementById('cepForm').addEventListener('submit', function(event) {
    event.preventDefault();

    var cep = document.getElementById('cep').value;

    if (cep.length !== 8) {
        alert('O CEP deve conter 8 dígitos.');
        return;
    }

    fetch(`https://viacep.com.br/ws/${cep}/json/`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Erro ao consultar o CEP.');
            }
            return response.json();
        })
        .then(data => {
            displayResult(data);
        })
        .catch(error => {
            alert(error.message);
        });
});

function displayResult(data) {
    var resultDiv = document.getElementById('result');

    if (data.erro) {
        resultDiv.innerHTML = 'CEP não encontrado.';
    } else {
        resultDiv.innerHTML = `
            <p><strong>Logradouro:</strong> ${data.logradouro}</p>
            <p><strong>Bairro:</strong> ${data.bairro}</p>
            <p><strong>Cidade:</strong> ${data.localidade}</p>
            <p><strong>Estado:</strong> ${data.uf}</p>
        `;
    }
}

Explicação do Código

Captura do Evento de Envio do Formulário: O código JavaScript captura o evento de envio do formulário para prevenir a ação padrão (recarregar a página) e processar o CEP fornecido.
Validação do CEP: O CEP é validado para garantir que contém exatamente 8 dígitos, o formato padrão no Brasil.
Requisição à API: Utilizando XMLHttpRequest ou Fetch API, uma requisição é feita à URL da API de CEP, que retorna os dados do endereço em formato JSON.
Manipulação da Resposta: A resposta é manipulada para verificar se o CEP foi encontrado. Se não for, uma mensagem de erro é exibida. Caso contrário, os dados do endereço são exibidos.

Após realizar todas essas etapas, você chegará a um resultado como o exemplo abaixo:

Consumir API de CEP em JavaScript: XMLHttpRequest

O XMLHttpRequest (XHR) é um objeto nativo do JavaScript usado para fazer solicitações HTTP para servidores web.

Foi introduzido pela primeira vez no Internet Explorer 5 e se tornou uma parte fundamental do desenvolvimento web para permitir a comunicação assíncrona com servidores, o que é essencial para o funcionamento de aplicações AJAX (Asynchronous JavaScript and XML).

Pontos importantes sobre o XMLHttpRequest:

Comunicação Assíncrona: Permite que dados sejam solicitados de um servidor sem recarregar a página inteira, proporcionando uma experiência de usuário mais fluida.
Suporte a Vários Métodos HTTP: Suporta métodos HTTP como GET, POST, PUT, DELETE, entre outros.
Compatibilidade Ampla: Tem suporte em praticamente todos os navegadores, tornando-se uma ferramenta robusta para desenvolvedores web.
Manejo de Erros e Estado: Oferece eventos como onreadystatechange e propriedades como readyState e status para controlar o fluxo de solicitações e respostas.

Consumir API de CEP em JavaScript: Fetch API

A Fetch API é uma interface moderna introduzida no ECMAScript 6 (ES6) que fornece uma maneira mais poderosa e flexível de fazer solicitações HTTP.

Ela foi projetada para substituir o XMLHttpRequest e resolver muitas de suas limitações.

Pontos importantes sobre a Fetch API:

Promessas (Promises): Utiliza Promises para lidar com respostas assíncronas, o que torna o código mais legível e fácil de gerenciar.
Sintaxe Simples e Clara: A Fetch API tem uma sintaxe mais limpa e intuitiva em comparação com o XMLHttpRequest.
Suporte a JSON Nativo: Facilita o trabalho com dados JSON, uma vez que a maioria das APIs modernas usa JSON para transmitir dados.
Melhor Manipulação de Erros: Proporciona uma maneira mais consistente e fácil de tratar erros em solicitações HTTP.

Benefícios do Uso da Fetch API

A Fetch API oferece diversas vantagens em relação ao XMLHttpRequest, incluindo:

Simplicidade: A Fetch API utiliza Promises, tornando o código mais limpo e legível.
Suporte a Asynchronous/Await: Com a Fetch API, é fácil utilizar a sintaxe async/await para escrever código assíncrono de forma mais clara.
Manipulação de Erros: A Fetch API possui uma abordagem mais intuitiva para tratar erros em requisições.

Conclusão: Como Consumir API de CEP em JavaScript

Consumir API de CEP em JavaScript é uma tarefa essencial e muito útil em diversos projetos web. Neste post, exploramos duas maneiras de realizar essa integração: usando XMLHttpRequest e Fetch API.

Ambas são válidas, mas a Fetch API é geralmente preferida por sua simplicidade e modernidade.

Praticar a integração de APIs ajuda a aprimorar habilidades de desenvolvimento e a construir aplicações mais robustas e funcionais.

Experimente implementar este exemplo e adapte-o conforme suas necessidades específicas.

Com o tempo e prática, consumir API de CEP em JavaScript e outras se tornará uma tarefa rotineira e indispensável no seu conjunto de habilidades de desenvolvedor web.

FAQ

Como Consumir API de CEP em JavaScript ainda vale a pena estudar?

Sim. O tema continua relevante quando é estudado com prática, fundamentos e atenção à experiência do usuário. Front-end muda bastante, mas HTML, CSS, JavaScript, acessibilidade e performance continuam essenciais.

Como praticar Como Consumir API de CEP em JavaScript sem ficar só na teoria?

Escolha uma interface pequena, implemente estados reais, teste em mobile, revise acessibilidade e documente decisões. Mesmo um componente simples pode ensinar muito quando é tratado como parte de um produto.

Como Consumir API de CEP em JavaScript ajuda no portfólio?

Ajuda quando aparece em projetos bem explicados. Um bom portfólio mostra problema, solução, decisões de interface, responsividade, organização do código e melhorias de performance ou usabilidade.