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:
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.