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.