
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
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:
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 comoreadyState
estatus
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.