Como utilizar a Fetch API no Javascript

Em uma das nossas aulas anteriores eu mostrei para você uma das formas como eu preparo as minhas aplicações para utilizar um banco de dados criando uma camada extra, especializada em fazer chamadas à uma API REST. Qualquer chamada ao banco de dados deve ser feita por meio desta “interface”.

Tendo isso em mente, eu resolvi mostrar a você que realmente esta abstração funciona. Antes, vou te ensinar a utilizar a API Fetch da WEB para realizar nossas chamadas ao nosso WebService.

API Fetch

A API Fetch é utilizada para fazer chamadas http. HTTP é o protocolo de transporte de dados mais utilizado na WEB. Se você prestar atenção, todos os sites começam com este protocolo. Ex: http://google.com

Estas chamadas HTTP foram padronizadas por volta dos anos 2000, com métodos específicos para algumas ações. Os métodos mais utilizados são: GET, POST, DELETE, PUT.

Ao realizar a abertura de um site, você está enviando uma requisição HTTP ou HTTPS se o site tiver um certificado de segurança, com o método GET. Estes métodos server para padronizar as chamadas HTTP, e são eles que nós vamos utilizar no decorrer deste artigo.

Utilizamos a API Fetch da seguinte forma:

fetch('https://randomuser.me/api/');

É desta forma simples que o fetch funciona. Estamos neste caso fazendo uma chamada HTTP/GET onde estamos buscando todos os clientes da API. O fetch fornece uma maneira fácil e lógica para buscar recursos de forma assíncrona através da rede.

Outra forma de utilizar o fetch  é para enviar dados, para isso, devemos especificar qual tipo de dados estamos enviado no segundo parâmetro da função.

fetch('https://meudominio.com/api/Clientes', {
  method: 'POST',
  body: meusDados //Dados que você vai enviar.
 });

Simples, não é mesmo? Para acessar os dados retornados pela resposta de nossa API, utilizamos o .then logo após o final da chamada da API. Desta forma estamos acessando a função de retorno (callback) da Promisse.

fetch('https://randomuser.me/api/').then(function(resposta) {
  console.log(resposta); // Mostra a resposta do servidor.
});

Basicamente é desta forma que utilizamos a API Fetch. Para o nosso exemplo, vamos precisar configurar o Header da nosso requisição. Basicamente, vamos dizer pra API que estamos enviando JSON e queremos JSON na resposta desta chamada.

let meusHeaders = {
  'Accept': 'application/json', // Aceita JSON na resposta.
  'Content-Type': 'application/json' // Envia JSON na requisição.
}

fetch('https://meudominio.com/api/Clientes', {
  headers: meusHeaders,
  method: 'POST',
  body: JSON.stringify(meusDados) //Dados que você vai enviar convertidos para uma string.
});

Neste exemplo estamos definindo o nosso Header e estamos convertendo a nossa requisição para uma String, utilizando o Objeto JSON. É preciso que esta conversão seja feita para que nossa API possa utilizar os dados lá na frente. Os demais métodos terão utilização semelhante.

Por fim, para acessar os dados em formato json, vamos utilizar a função json() da resposta do fetch que também retorna uma Promise.

fetch('https://randomuser.me/api/').then(function(response) {
    response.json().then(function(data) {
        console.log(data) //Dados retornados pela API
    });
});

Conclusão

Agora que você já sabe como utilizar a API Fetch, você está preparado para interagir com os WebServices, isso vai permitir que a sua aplicação se comunique com o mundo. Em nosso próximo encontro vou lhe mostrar como interagir com um Banco de Dados, vai ser fantástico! Fica ligado!

Leave a comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Copyright © – Jonatan Pietroski