Consumindo API com o Fetch

Faaaaala galera!!!! Hoje eu estou aqui para falar sobre o Fetch!!!

O que é o Fetch?

O Fetch API fornece uma interface JavaScript para acessar e manipular partes do HTTP pipeline, tais como os pedidos e respostas. (MDN)

Vamos aprender na prática

Nós iremos consumir uma API para Consulta de CEP criado pelo pessoal da Webschool! Para começarmos, vamos ver como será nossa estrutura de diretórios

├── index.html
└── js
    └── main.js

No nosso index.html vai conter o seguinte conteúdo:

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <h1 class="title">Consulta Cep com o Fetch</h1>
      <form action="" class="field">
        <label for="" class="label">CEP</label>
        <input type="text" name="cep" id="cep" class="input" placeholder="Digite o Cep...">
        <button class="button is-success" id="btn-search">Pesquisar...</button>
      </form>
      <section id="info"></section>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>

Nesse html não tem nada de novo, apenas repare naquela section sem nenhum conteúdo. Ela vai ser usada para podermos renderizar nossos dados na tela

Agoras vamos partir para a parte legal, o nosso arquivo ❤️ JavaScript!! Vamos começar selecionando os elementos na árvore do DOM a partir do id.

const cep = document.getElementById('cep');
const btn = document.getElementById('btn-search');
const renderInfo = document.getElementById('info');

Logo em seguida vamos adicionar um evento para que quando nosso botão seja pressionado, seja feito a requisição na nossa API que irá retornar um JSON.

btn.addEventListener('click', (e) => {
  e.preventDefault()
  const cepValue = cep.value;
  consultaCep(cepValue)
});

Até aqui nada de novo, apenas JavaScript básico. Eu criei um função onde será feita a requisição com o Fetch que recebe um parâmetro, que vai ser o número do CEP digitado pelo usuário. Agora vamos para o código do nossa função

function consultaCep(cep) {
  const URL = `https://cep.webschool.io/api/br/${cep}`
  const request = fetch(URL)

  request
    .then(data => data.json())
    .then(data => {
      const { city, address, district, state } = data;
      createSectionInfo(city, address, district, state);
    });
}

É nessa função que a mágica acontece!! Primeiro nós definimos a url na qual iremos fazer o request, segundo nós definimos a variável que irá guardar nosso request.

O Fetch retorna uma Promise e para manipularmos essa Promise iremos utilizar o then. O then vai receber um callback com apenas um argumento, que é o que recebemos da nossa API. A primeira coisa que temos que fazer é transformar nossa Promise em um objeto Json, para isso basta apenas usar o .json(), logo em seguida vamos tratar esse nosso Json dessa forma:

const { city, address, district, state } = data;

Nessa linha eu estou usando uma feature do ES6 chamada Destructing (falarei em breve sobre ela e outras features do ES6), resumidamente o que eu estou fazendo é pegando as propriedades do objeto data de uma forma mais limpa.

Seguindo nosso código, eu criei mais um função onde vai ser renderizada os dados na tela. Nessa função eu tenho o seguinte código:

function createSectionInfo(city, address, district, state) {
  const tableInfo = `
    <table class="table">
      <thead>
        <tr>
          <th>RUA</th>
          <th>BAIRRO</th>
          <th>CIDADE</td>
          <th>ESTADO</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>${address}</td>
          <td>${district}</td>
          <td>${city}</td>
          <td>${state}</td>
        </tr>
      </tbody>
    </table>`
  renderInfo.innerHTML = tableInfo;
}

Primeiro de tudo a função vai recerber quatro parâmetros, que são: Cidade, Endereço, Bairro e Estado. Logo em seguinda eu crio uma constante que vai receber nosso HTML, aqui eu estou usando mais uma feature do ES6 chamada Templates String (também falarei sobre ela em breve). Perceba que eu tenho o seguite código: ${address} é dessa forma o uso de variáveis dentro de um Template String.

Conclusão

Chegamos ao final de mais um post aqui no blog!!!!! Esse post foi bem básico, futuramente espero estar abordando o Fetch de forma mais profunda!

Não se esqueçam de deixar o feedback de vocês, isso é muito importante para eu melhorar os próximos posts!

Você pode ver o resultado final AQUI