Consultando API de CEP com Fetch

Esses dias tive que consumir uma API que retornava dados dos países do mundo. Até então meu contato com consumo de API era 0. Tinha apenas estudado os métodos HTTP, um amigo me ensinou sobre CRUD e criamos um pequeno server com Express. Mas consumir de fato eu não tinha noção de como fazer. Pois bem, um amigo me apresentou o fetch e decidi escrever algo sobre para que eu pudesse aprender fazendo e explicando no ponto de vista de um iniciante. Então vamos começar.

O que é fetch?

A ferramenta é utilizada principalmente no Front-end e é utilizada para retornar dados de uma API existente e exibir para o nosso usuário.

A API fetch nos fornece uma interface para realizar requisições HTTP através do navegador por meio de Promises. Utilizamos o fetch como meio de substituir o XMLHttpRequest que já foi bastante utilizado para consumirmos API's.

Antes de utilizamos o fetch, precisamos entender um pouco sobre promises. É um conceito bastante novo para mim, mas não é tão complexo.

O que são promises?

Promises são um padrão de desenvolvimento que visam representar a conclusão de operações assíncronas. Ou seja, elas definem uma ação que vai ser executada no futuro, após algo ter sido concluído. A forma que as promises são feitas no fetch é através do comando .then(). Quando estamos realizando uma busca numa API, utilizamos as promises para executar ações quando a busca for realizada. Aqui você pode ler um artigo que explana o funcionamento das promises

Iniciando o projeto

Nosso projeto é bem simples, iremos consumir uma API e retornar dados de endereço quando digitarmos um CEP em um input. Para isso, criaremos um novo projeto chamado cepSearch.

Aqui abaixo uma visão do que construí no html.

Para efeito prático não utilizei nenhuma estilização, apenas o código HTML puro. O importante é focar na lógica do projeto.

Mão no código

Como utilizarei referência de id para citar alguns processos lógicos do Javascript, coloco abaixo o que foi utilizado no HTML para maior embasamento. É muito importante que, caso você vá reproduzir o que executei, utilize os mesmos id's dos inputs. Assim, poderemos utilizar corretamente os dados que o nosso fetch irá retornar.

 <div class="container">
        <form action="">
          <div class="form-group">
            <label for="cep">CEP</label><br>
            <input type="text" class="form-control" id="cep">
            <small>00000-000</small>
          </div>
          <div class="form-group">
            <label for="logradouro">Logradouro</label><br>
            <input type="text" class="form-control" id="logradouro">
            <small>Rua</small>
          </div>
          <div class="form-group">
            <label for="bairro">Bairro</label><br>
            <input type="text" class="form-control" id="bairro">
            <small>Bairro</small>
          </div>
          <div class="form-group">
            <label for="localidade">Localidade</label><br>
            <input type="text" class="form-control" id="localidade">
            <small>Cidade</small>
          </div>
          <div class="form-group">
            <label for="uf">UF</label><br>
            <input type="text" class="form-control" id="uf">
            <small>Estado</small>
          </div>
        </form>
      </div>

Inicialmente preciso adicionar um efeito de blur no primeiro elemento input que colocarei o CEP. O blur verifica quando um elemento perde o foco, sendo assim, quando digitarmos o CEP e apertarmos tab, ele irá executar a função que queremos. Para selecionar o input, irei me referenciar pelo id #cep.

Então, selecionando o input:

$("#cep").blur(function (e) {
  }

Após selecionado o input, desejo capturar o valor que foi inputado e atribuir este valor a uma variável. Então temos:

$("#cep").blur(function (e) {
  let cep = this.value
  }

Desse modo, sempre que digitarmos algo no input CEP e tirarmos o foco do input, ele irá atribuir o valor digitado a variável cep, desse modo, temos o valor que utilizaremos para consultar os dados de endereço.

Após obtermos o valor inputado no CEP temos que buscar o valor em alguma API de endereço. Para isso, utilizaremos a API do viacep. Você pode acessa-la através do link: https://viacep.com.br/

É importante lermos a documentação da API antes de utilizarmos, desse modo, poderemos visualizar como efetuar os métodos HTTP para requisitar os dados.

No nosso caso, queremos utilizar o método GET, ou seja, iremos obter informações de uma API. Esses valores, desejo que seja retornado no formado JSON, sendo assim, utilizarei a estrutura que o próprio viacep recomenda para essas especificações:

https://viacep.com.br/ws/cep/json/

Tudo certo, agora temos já temos o necessário para consumir a API. O método que utilizaremos para capturar os dados, iremos utilizar o fetch. Antes de tudo, iremos entender a estrutura do fetch.

Quando chamamos o fetch, o primeiro valor que ele espera é a URL onde será buscado os dados. Essa é a URL que nossa API disponibiliza para consultas. Como sabemos, nossa URL é dinâmica, pois ela recebe o valor do CEP inserido no input. Para que nossa solicitação GET atualize sempre que um novo valor for digitado faremos a estrutura da URL conforme a seguir:

https://viacep.com.br/ws/${cep}/json/

Assim, utilizando o template string, podemos adicionar a variável cep a URL que o fetch utilizará.

Até então temos a seguinte estrutura:

$("#cep").blur(function (e) {
  let cep = this.value


  fetch(`https://viacep.com.br/ws/${cep}/json/`)
}

O fetch é uma ferramenta assíncrona, o que significa que você tem que esperar a conclusão da operação antes de fazer qualquer coisa com essa resposta, caso contrário, um erro será gerado. Para que utilizemos a resposta após a consulta, utilizamos o recurso .then() que realiza operações assíncronas.

Diremos agora que, após a consulta ter sido efetuada, iremos capturar a resposta que foi obtida e a aplicaremos numa função. Esta função transformará nossa resposta num formado JSON, assim, podemos utilizar os dados separadamente como objetos.

O código será:

$("#cep").blur(function (e) {
  let cep = this.value


  fetch(`https://viacep.com.br/ws/${cep}/json/`)
    .then(response => {
      response.json()
}

Quando a resposta for capturada e convertida, queremos que esse objeto passe por um tratamento onde iremos filtrar os dados que serão utilizados. Então utilizaremos outro recurso .then() que chamará outra função. Esta função receberá o objeto JSON gerado.

$("#cep").blur(function (e) {
  let cep = this.value


  fetch(`https://viacep.com.br/ws/${cep}/json/`)
    .then(response => {
      response.json()
        .then(data => showData(data))
    })

A resposta JSON solicitará a constante showData. Aqui iremos tratar o objeto retornado da nossa busca no CEP.

A constante showData irá conter uma arrow function que será responsável por retornar os dados do objeto gerado e atribuir estes dados aos campos correspondentes do formulário.

Iniciamos a constante e chamamos a arrow function para pesquisar os dados através de um For-In.

const showData = (result) => {
}

Depois de declarada a constante, iremos atribuir um For-In.

const showData = (result) => {
  for(const campo in result){
  console.log(campo)
    }
  }

O For-In passado na arrow function retorna os dados de cada um dos elementos do objeto. E como ele faz isso? não é tão complexo.

Cada um dos campos do objeto result está sendo guardada na constante campo, o console.log executado nos mostra isso.

Como você pode ver, cada um dos valores do objeto esta sendo retornado a partir da constante campo.

Com esses valores em mão, iremos utilizar a estrutura condicional if para tratar os dados.

const showData = (result) => {
  for(const campo in result){
    if(document.querySelector("#"+campo)){
      document.querySelector("#"+campo).value = result[campo]

    }
  }
}

O if utilizado captura os elementos HTML com os id's dos campos que retornamos (Esta observação é importante, pois os id's devem possuir exatamente os mesmos nomes dos campos no nosso caso).

Após isso, iremos atribuir o valor de cada um dos campos retornados ao id de cada um dos inputs. A linha de código document.querySelector("#"+campo).value = result[campo] atribui o valor do campo ao input com o id do campo em questão. Assim, o funcionamento é estabelecido.

Como você pôde ver, o funcionamento do fetch não é tão complexo, ele captura dados através de uma URL especificada e retorna os dados através de promises. Esses dados podem ser convertidos para objetos JSON e utilizados dentro da nossa aplicação.

É interessante termos um conhecimento acerca de objetos, desse modo, conseguiremos tratar nossas requisições corretamente.

Nos links abaixo vocês poderão conhecer mais sobre fetch e sua utilização.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data

https://github.github.io/fetch/