Com a modernização das aplicações web, é cada vez mais comum a implementação de APIs para acessar dados externos. Felizmente, hoje já é possível atualizar partes de um código, gerando uma experiência melhor do lado dos usuários. Tudo começou com o AJAX, sendo o Fetch API uma forma bastante eficiente de obter dados de modo assíncrono.
Neste artigo, vamos trazer informações práticas sobre o uso de Fetch API. A ideia é explicar, entre outras coisas, o seu funcionamento com base em promises, sintaxe e como passar dados em uma solicitação POST. Continue a leitura e entenda como buscar informações externas com a Fetch API!
O que é Fetch API?
Basicamente, a Fetch API consiste em buscar dados assíncronos com a XMLHttpRequest. Apenas a título de lembrança, esta é uma função JavaScript que ajuda a fazer buscas de informações sem a necessidade de atualizar uma página web inteira.
Além disso, a Fetch API possibilita o uso de APIs Rest, por meio de recursos extras como respostas em streaming e cache de dados.
Como funciona Fecth API?
Para explicar o funcionamento da Fetch API, é impossível não citar o conceito de promises. Este consiste em um objeto JavaScript capaz de realizar a busca assíncrona de dados. Em outras palavras, quando é feita uma solicitação, ela pode ser atendida prontamente ou depois, mas isso não impede o restante da aplicação de funcionar normalmente.
Na prática, uma promise pode assumir vários estados, retornando uma resposta de sucesso ou erro. Dito isso, vale destacar que não cabe à promise retornar com um código 404, por exemplo. Se essa for a resposta da requisição, a promise vai retornar um status ok, mas com um false em seguida. A única possibilidade de a promise rejeitar o status de erro HTTP é se houver alguma falha na rede.
Os quatro estágios de uma promise são:
- pending: é quando a solicitação ainda não foi aceita e nem rejeitada;
- fulfilled: é quando a promise retorna uma resposta de sucesso;
- rejected: significa falha na requisição;
- settled: nesta fase final, será possível saber se a solicitação foi aceita ou rejeitada.
- Para os desenvolvedores, as promises são consideradas uma melhoria em relação às callbacks. Isso porque, à medida que uma aplicação se torna mais complexa, pode ocorrer o que se chama de “inferno das callbacks“, uma prática ruim de codificação. Logo, as promises ajudam o código a ficar mais limpo e fácil de entender e manter.
Quais são os seus benefícios?
Do lado do usuário, ele não sabe se você está usando promise ou callbacks em requisições assíncronas. Para ele, o que conta é o aplicativo ser funcional e responsivo, além de acessível também em aparelhos móveis.
Com a evolução dos processos de requisição e resposta, tudo isso que falamos há pouco torna-se possível. A Fetch API, do lado do desenvolvedor, permite não só um código mais claro, mas também fácil de manter e modularizado. Isso significa que, na hora de fazer manutenção em um pequeno trecho da aplicação, outras partes permaneçam intactas.
Como usá-las na busca de dados?
Entendido o funcionamento básico da Fetch API, vamos agora focar na sua sintaxe e solicitações. No código, o recurso fetch (busca) corresponde a uma função que recebe como parâmetro uma URL. Além disso, o método recebe também um objeto JSON, contendo, por exemplo, os cabeçalhos e o corpo da solicitação.
Sintaxe da Fetch API
Uma das opções de uso do cabeçalho é com uma propriedade da função Fetch chamada headers. Nele, é passado um objeto JSON, ficando com a seguinte sintaxe:
headers: {“Content-type”: “application/json;charset=UTF-8”}
Busca de dados com Fetch API
Diferentemente do XMLHttpRequest que responde uma requisição com os dados propriamente ditos, o Fetch retorna com informações do objeto. Em outras palavras, a resposta inicial da função são o cabeçalho, código de status e outras informações. Para acessar, de fato, os dados, deve-se invocar uma função chamada “res.json()“.
Solicitações POST
O método POST tem a finalidade de fazer diversos envios de dados para a API. A criação de um registro em uma conta de aplicativo é um exemplo de seu uso. Dito isso, ao aplicar o Fetch API no código, usa-se uma propriedade chamada “body“, sendo passada como parâmetro uma string.
Um ponto que merece atenção é o seguinte: para evitar erros na codificação, é preciso saber que o corpo da solicitação POST recebe uma cadeia de caracteres JSON, enquanto os cabeçalhos recebem um objeto do tipo JSON.
Veja o código abaixo, mostrando os dados a serem enviados em uma solicitação POST:
let _data = {
title: “foo”,
body: “bar”,
userId:1
}
fetch(‘https://jsonplaceholder.typicode.com/posts’, {
method: “POST”,
body: JSON.stringify(_data),
headers: {“Content-type”: “application/json; charset=UTF-8”}
})
.then(response => response.json())
.then(json => console.log(json));
.catch(err => console.log(err));
Neste trecho, é possível notar o que acabamos de falar. Na parte de cima do código, foram passadas strings JSON no corpo da solicitação POST, enquanto que no método fetch foram usados objetos.
- Veja também: Tudo o que você precisa saber sobre API Key!
Promises
Na parte final do código acima, ocorre o tratamento de resposta por meio das promises. Voltando a falar delas, repare que o then e o catch são usados para tratar casos de erro: se a resposta for bem sucedida, usa-se somente o then.
Convém frisar que, diferentemente do fetch, que é uma função, a promise é um objeto. Logo, a sintaxe é a seguinte:
new promise ((resolve: Function, reject: Function) => void)
Como foi possível notar, é preciso que o objeto receba os parâmetros de execução, de modo a resolver ou rejeitar a promise. Por serem objetos, promises possuem métodos, sendo que alguns deles são:
- promise.all: retorna todas as promises passadas no argumento;
- promise.race: retorna um valor ou a razão dela estar pendente ou rejeitada;
- promise.reject: mostra os objetos rejeitados e a razão da rejeição;
- promise.resolve: mostra os objetos resolvidos e o seu respectivo valor.
A Fetch API, como vimos, é responsável pela busca de dados externos de modo assíncrono. Funciona com base nas promises, sendo que estas contribuem para evitar o aninhamento de callbacks — o que resultaria na dificuldade de entender e manter o código posteriormente.
Quer se aprofundar ainda mais no tema? Confira agora mesmo nosso guia prático de API Rest com Node!
