Como usar a Fetch API do JavaScript para buscar dados

Introdução

Houve um tempo em que o XMLHttpRequest era usado para fazer solicitações de API. Ele não incluía promessas e não gerava um código JavaScript organizado. Ao usar o jQuery, usava-se a sintaxe mais organizada com o jQuery.ajax().

Agora, o JavaScript tem sua própria maneira integrada de fazer solicitações de API. Isso é feito pela Fetch API, um novo padrão para fazer solicitações de servidor com promessas, que inclui também muitas outras funcionalidades.

Neste tutorial, você criará solicitações GET e POST usando a Fetch API.

Pré-requisitos

Para concluir este tutorial, você precisará do seguinte:

  • A versão mais recente do Node instalada em sua máquina. Para instalar o Node no macOS, siga os passos descritos neste tutorial Como instalar o Node.js e criar um ambiente de desenvolvimento local no macOS.
  • Uma compreensão básica de programação em JavaScript. Aprenda mais sobre isso com a série Como programar em JavaScript.
  • Uma certa compreensão sobre promessas em JavaScript. Leia a seção de promessas deste artigo sobre o loop de eventos, callbacks, promessas e async/await em JavaScript.

Passo 1 — Começando com a sintaxe da Fetch API

Para usar a Fetch API, chame o método fetch, que aceita a URL da API como um parâmetro:

fetch(url) 

Após o método fetch(), inclua o método de promessa then():

.then(function() {  }) 

O método fetch() retorna uma promessa. Se a promessa retornada for resolve, a função dentro do método then() é executada. Essa função contém o código para lidar com os dados recebidos da API.

Abaixo do método then(), inclua o método catch():

.catch(function() {  }); 

A API chamada usando fetch() pode estar inoperante ou outros erros podem ocorrer. Se isso acontecer, a promessa reject será retornada. O método catch é usado para lidar com reject. O código dentro de catch() será executado se um erro ocorrer ao chamar a API escolhida.

Resumindo, usar a Fetch API será parecido com isto:

fetch(url) .then(function() {  }) .catch(function() {  }); 

Com uma compreensão da sintaxe para usar a Fetch API, agora siga em frente para usar fetch() em uma API real.

Passo 2 — Usando Fetch para buscar dados de uma API

As amostras de código a seguir baseiam-se na Random User API. Usando a API, você irá buscar dez usuários e os exibirá na página usando o JavaScript puro.

A ideia é obter todos os dados da Random User API e exibí-los em itens de lista dentro da lista de autores. Comece criando um arquivo HTML e adicionando um cabeçalho e uma lista não ordenada com o id de authors:

<h1>Authors</h1> <ul id="authors"></ul> 

Agora, adicione identificadores script no final do seu arquivo HTML e use um seletor DOM para pegar o ul. Utilize getElementById com authors como o argumento. Lembre-se, authors é o id para o ul criado anteriormente:

<script>      const ul = document.getElementById('authors');  </script> 

Crie uma variável constante chamada url que armazenará o URL da API que irá retornar dez usuários aleatórios:

const url = 'https://randomuser.me/api/?results=10'; 

Com ul e url instalados, é hora de criar as funções que serão usadas para criar os itens de lista. Crie uma função chamada createNode que recebe um parâmetro chamado element:

function createNode(element) {  } 

Mais tarde, quando o createNode for chamado, será necessário passar o nome de um elemento HTML real a ser criado.

Dentro da função, adicione uma instrução return que retorna o element usando document.createElement():

function createNode(element) {     return document.createElement(element); } 

Também será necessário criar uma função chamada append que recebe dois parâmetros: parent e el:

function append(parent, el) {  } 

Essa função irá acrescentar el ao parent usando o document.createElement:

function append(parent, el) {     return parent.appendChild(el); } 

Tanto o createNode quanto o append estão prontos para o uso. Agora, com a Fetch API, chame a Random User API usando fetch() com url como o argumento:

fetch(url) 
fetch(url)   .then(function(data) {      })   })   .catch(function(error) {    }); 

No código acima, você está chamando a Fetch API e passando o URL para a Random User API. Então, uma resposta é recebida. No entanto, a resposta recebida não é JSON, mas um objeto com uma série de métodos que podem ser usados dependendo do que você quer fazer com as informações. Para converter o objeto retornado em JSON, use o método json().

Adicione o método then(), que irá conter uma função com um parâmetro chamado resp:

fetch(url) .then((resp) => ) 

O parâmetro resp recebe o valor do objeto retornado de fetch(url). Use o método json() para converter resp em dados JSON:

fetch(url) .then((resp) => resp.json()) 

Os dados JSON ainda precisam ser processados. Adicione outra instrução then() com uma função que tem um argumento chamado data:

.then(function(data) {      }) }) 

Dentro dessa função, crie uma variável chamada authors que seja definida igual à data.results:

.then(function(data) {     let authors = data.results; 

Para cada autor em authors, será criado um item de lista que exibe uma figura o nome deles. O método map() é ótimo para isso:

let authors = data.results; return authors.map(function(author) {  }) 

Dentro de sua função map, crie uma variável chamada li que será definida igual a createNode com li (o elemento HTML) como o argumento:

return authors.map(function(author) {     let li = createNode('li'); }) 

Repita isso para criar um elemento span e um elemento img:

let li = createNode('li'); let img = createNode('img'); let span = createNode('span'); 

A API oferece um nome para o author e uma imagem que acompanha o nome. Defina img.src para a imagem do autor:

let img = createNode('img'); let span = createNode('span');  img.src = author.picture.medium; 

O elemento span deve conter o primeiro e último nome de author. A propriedade innerHTML e a interpolação de strings permitirão fazer isso:

img.src = author.picture.medium; span.innerHTML = `${author.name.first} ${author.name.last}`; 

Com a imagem e o elemento de lista criados juntamente com o elemento span, use a função append criada anteriormente para exibir esses elementos na página:

append(li, img); append(li, span); append(ul, li); 

Com ambas as funções then() concluídas, adicione agora a função catch(). Essa função irá registrar o erro em potencial no console:

.catch(function(error) {   console.log(error); }); 

Este é o código completo da solicitação que você criou:

function createNode(element) {     return document.createElement(element); }  function append(parent, el) {   return parent.appendChild(el); }  const ul = document.getElementById('authors'); const url = 'https://randomuser.me/api/?results=10';  fetch(url) .then((resp) => resp.json()) .then(function(data) {   let authors = data.results;   return authors.map(function(author) {     let li = createNode('li');     let img = createNode('img');     let span = createNode('span');     img.src = author.picture.medium;     span.innerHTML = `${author.name.first} ${author.name.last}`;     append(li, img);     append(li, span);     append(ul, li);   }) }) .catch(function(error) {   console.log(error); }); 

Você acabou de realizar uma solicitação GET com sucesso usando a Random User API e a Fetch API. No próximo passo, irá aprender como realizar solicitações POST.

Passo 3 — Lidando com solicitações POST

A Fetch usa por padrão solicitações GET, mas é possível usar qualquer outro tipo de solicitação, alterar os cabeçalhos e enviar os dados. Para fazer isso, é necessário definir seu objeto e passá-lo como o segundo argumento da função fetch.

Antes de criar uma solicitação POST, crie os dados que gostaria de enviar à API. Este será um objeto chamado data com a chave name e o valor Sammy (ou seu nome):

const url = 'https://randomuser.me/api';  let data = {   name: 'Sammy' } 

Certifique-se de incluir uma variável constante que contém o link da Random User API.

Como esta é uma solicitação POST, será necessário declarar isso explicitamente. Crie um objeto chamado fetchData:

let fetchData = {  } 

Esse objeto precisa incluir três chaves: method, body e headers. A chave method deve conter o valor 'POST'. body deve ser definido igual ao objeto data que acabou de ser criado. headers deve conter o valor de new Headers():

let fetchData = {   method: 'POST',   body: data,   headers: new Headers() } 

A interface Headers, que é uma propriedade da Fetch API, permite realizar várias ações em cabeçalhos de solicitação HTTP e de resposta. Se quiser aprender mais sobre isso, este artigo chamado Como definir rotas e métodos de solicitação HTTP no Express pode oferecer-lhe mais informações.

Com esse código no lugar, a solicitação POST pode ser feita usando a Fetch API. Você incluirá url e fetchData como argumentos para sua solicitação POST fetch:

fetch(url, fetchData) 

A função then() irá incluir o código que lida com a resposta recebida do servidor da Random User API:

fetch(url, fetchData) .then(function() {     // Handle response you get from the server }); 

Para criar um objeto e usar a função fetch(), há também outra opção. Ao invés de criar um objeto como o fetchData, é possível usar o construtor de solicitações para criar seu objeto de solicitação. Para fazer isso, crie uma variável chamada request:

const url = 'https://randomuser.me/api';  let data = {   name: 'Sara' }  var request = 

A variável request deve ser definida igual a new Request. O constructo new Request recebe dois argumentos: a url da API (url) e um objeto. O objeto também deve incluir as chaves method, body e headers assim como o fetchData:

var request = new Request(url, {     method: 'POST',     body: data,     headers: new Headers() }); 

Agora, request pode ser usado como o argumento único para o fetch(), uma vez que ele também inclui a url da API:

fetch(request) .then(function() {     // Handle response we get from the API }) 

No conjunto, seu código ficará semelhante a este:

const url = 'https://randomuser.me/api';  let data = {   name: 'Sara' }  var request = new Request(url, {     method: 'POST',     body: data,     headers: new Headers() });  fetch(request) .then(function() {     // Handle response we get from the API }) 

Agora, você conhece dois métodos para criar e executar solicitações POST com a Fetch API.

Conclusão

Embora a Fetch API ainda não seja suportada por todos os navegadores, é uma ótima alternativa ao XMLHttpRequest. Se quiser aprender como chamar APIs da Web usando o React, confira este artigo sobre este tópico.