Como consultar CEP utilizando Javascript

Se você está desenvolvendo algum e-commerce, ou mesmo desenvolvendo algo precisa de cadastro onde necessita do endereço, algo que facilita bastante para o usuário é o preenchimento automático a partir do CEP.

Temos já no blog uma publicação de como fazer usando jQuery, mas agora faremos uma versão usando apenas javascript.

A ideia é quando usuário digita um cep, e clicar fora do campo de cep, os outros campos de endereço sejam preenchidos automaticamente. Esse preenchimento é trava de uma requisição de uma API, que você informa o CEP, ele vai retornar os dados dos campos.

Sabendo desse fluxo, vamos definir primeiramente o HTML

No HTML terá apenas um formulário com campos de cep, rua, bairro, cidade, e estado.

<form>
  <div class="frm-group">
    <label>CEP</label>
    <input type="text" name="cep" />
  </div>
  
   <div class="frm-group">
      <label>Rua</label>
      <input type="text" name="rua" />
    </div>
    
    <div class="frm-group">
      <label>Bairro</label>
      <input type="text" name="bairro" />
    </div>
    
    <div class="frm-group">
      <label>Cidade</label>
      <input type="text" name="cidade" />
    </div>
    
    <div class="frm-group">
      <label>Estado</label>
      <input type="text" name="estado" />
    </div>
</form>

Esse formulário temos os campos input, que são englobados por uma div, com classe .frm-group, é apenas pra fazermos uma pequena estilização via CSS. Vamos agora aplicar esse estilização

.frm-group{
  padding:5px;
}
.frm-group label{
  display: block;
}

.frm-group:nth-child(1){
  border: 1px solid #CCC;
  background: #e5e5e5;
  padding: 10px 5px;
}

Fizemos apenas uma seleção das div.frm-group, para definir uma espaçamento, deixar o label como display:block para ele ocupar o espaço para fazermos uma quebra de linha, e selecionamento o primeiro campo, que do CEP , para ter uma cor diferente.

Agora vamos para o javascript, vamos definir uma função que auto-executa para definirmos um escopo para as que variáveis fiquem nesse escopo, par evitar vazamento, e assim evitando possíveis bug caso você implemente em algum sistema existente.

(function(){ 
/*Aqui dentro ficará o script*/ 
})(); 

Agora vamos selecionar o campo de CEP e atribuir um evento blur nesse campo, que quando ao clicar fora dele, ele execute alguma ação

(function(){ 

    const cep = document.querySelector("input[name=cep]");

    cep.addEventListener('blur', e=> {
    
   });

 })(); 

Pronto, agora precisamos recuperar o que foi digitado, fazer uma limpeza no campo, para deixar apenas números.

(function(){ 

    const cep = document.querySelector("input[name=cep]");

    cep.addEventListener('blur', e=> {
         const value = cep.value.replace(/[^0-9]+/, '');
         const url = `https://viacep.com.br/ws/${value}/json/`;
   });

 })(); 

Recuperamos o valor digitado no campo cep, atraves do atributo value, e usamos a função replace para remover todos os caracteres que não sejam numero, através de uma expressão regular.
Além disso, definimos uma variação url, que contém o endpoint para fazer a requisição para retornar as informações do cep.

Agora vamos realizar a requisição usando a função fetch do javascript.

(function(){ 

    const cep = document.querySelector("input[name=cep]");

    cep.addEventListener('blur', e=> {
         const value = cep.value.replace(/[^0-9]+/, '');
         const url = `https://viacep.com.br/ws/${value}/json/`;

       fetch(url)
      .then( response => response.json())
      .then( json => {
      		
        
      
      });
   });

 })(); 

A função fetch retorna um Promisse, e acessamos a Promisse com método then, definimos uma função anônima que o parâmetro será objeto Response, e assim retornando o método json do objeto Response, que também é uma Promisse, e como vimos, para acessar uma Promisse usando o método then, definimos uma função anônima recebendo um json.

Agora fizemos a requisição, agora vamos, com Json retornando, vamos preencher os campos.

(function(){ 

    const cep = document.querySelector("input[name=cep]");

    cep.addEventListener('blur', e=> {
         const value = cep.value.replace(/[^0-9]+/, '');
         const url = `https://viacep.com.br/ws/${value}/json/`;

       fetch(url)
      .then( response => response.json())
      .then( json => {
      			
          if( json.logradouro ) {
          	document.querySelector('input[name=rua]').value = json.logradouro;
                document.querySelector('input[name=bairro]').value = json.bairro;
                document.querySelector('input[name=cidade]').value = json.localidade;
                document.querySelector('input[name=estado]').value = json.uf;
          }
        
      
      });
   });

 })(); 

Na API do viacep, ele retorna algumas informações, como logradouro (rua), bairro, localidade (cidade), uf (estado), ele trás também o código do IBGE, mas não vamos utilizar. Vemos se o campo logradouro existe, se existir, selecionamos cada campo, e atribuímos os valores correspondentes.

Dessa forma, você pode implementar em seus projetos, de uma forma fácil e rápido usando apenas javascript.

Espero que tenha gostado.

Você gostou desse tutorial? Quem tal aprender  JavaScript? Nós possuímos diversos cursos sobre Front-End que ajudará a dominar essa linguagem. Não perca tempo, assine agora, e venha estudar com a gente.