Table of Contents
URL: https://www.progressiverobot.com/how-to-use-the-javascript-fetch-api-to-get-data-pt/
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.
