Introdução
A API Fetch é uma solução nativa do Javascript que possibilita realizar requisições para obter dados de uma API.
Antigamente, para realizar uma request para uma API, era necessário usar XMLHttpRequest ou então fazer por jQuery com jQuery.ajax().
Porém poderia ser muito verboso escrever o código XMLHttpRequest, ou então ter que usar uma dependência externa, que no caso o jQuery.
Agora com a API Fetch, é possível realizar requisições para buscar dados em APIs diretamente do Javascript, e de forma simples.
Essa API segue o mesmo conceito de Promises, então é possível usar then e catch, para realizar tratamentos do retorno e de erros.
Como funciona a requisição para uma API
Você irá precisar realizar uma requisição para uma API, quando precisar consumir dados de um backend, informações que ficam hospedadas em um servidor e entre outros.
Normalmente essas informações são tratadas e servidas por linguagens de programação de backend como PHP, Java, Phyton e entre outras.
Se você é um programador frontend, provavelmente irá precisar realizar requisições para buscar dados em um backend.
Normalmente os dados que precisar acessar estarão disponíveis em uma URL, por exemplo www.sitedaempresa.com.br/usuarios, esse é um exemplo de URL para buscar dados de usuários.
Essa URL poderia retornar um JSON com todos os usuários cadastrados no sistema, e a partir disso você pode listar todos esses dados em uma tabela.
Sabendo disso, vamos ver a estrutura para realizar uma requisição e buscar esse tipo de dados.
Estrutura da API Fetch
A estrutura base é dessa forma:
fetch('url_de_busca')
.then(function (response) {
// Caso a requisição tenha sucesso irá cair aqui
return response.json();
})
.then(function (data) {
// É possível encadear as chamadas de then(), no caso esse segundo then, tem o que foi retornado no primeiro.
console.log(data[0]);
})
.catch(function (error) {
// Caso dê algum erro na request, irá cair aqui
console.log(error);
});
Não é tão simples de entender de primeira, mas ao usar com frequência fica mais fácil de lembrar.
É necessário ter uma URL de API na qual realizará a busca, e o retorno pode ser obtido pelo then.
O then será chamado assim que a requisição retornar com os dados, é possível passar uma função que vai ter um parâmetro, normalmente chamado de response, e nesse parâmetro tem os dados retornados na API.
O catch não é necessário, mas é importante ter, porque uma requisição pode dar erro por vários motivos, falta de internet, falta de comunicação com o servidor da API e entre outros.
Então por isso é interessante sempre ter o catch para obter os dados de erro de uma requisição, para que seja possível tratar e corrigir o erro.
Vamos ver alguns exemplos práticos de como realizar requisições com a API Fetch.
Como fazer uma request do tipo GET com a API Fetch
Para o exemplo prático de como buscar dados, vou utilizar uma API pública que retorna alguns fatos engraçados, essa API retorna os dados em inglês, mas vai servir para mostrar o funcionamento.
A URL na qual vamos fazer a busca é essa: https://asli-fun-fact-api.herokuapp.com/
Utilizando a estrutura acima, o código irá ficar dessa forma:
fetch("https://asli-fun-fact-api.herokuapp.com/")
.then((response) => response.json())
.then((data) => {
console.log(data);
})
.catch(function (error) {
console.log(error);
});
// se não der erro na requisição, será mostrado algo como:
// {status: true, data: Object}
// status: true
// data: Object
// id: "20"
// fact: "Some sea snakes can breathe through their skin."
// cat: "sea"
// hits: "1859"
O primeiro then, foi colocado para resolver a promise e trazer os dados como json da consulta.
Sem esse primeiro then, pode ser que o retorno da consulta fique como Promise {<pending>}, que significa que a promise está esperando para resolver a requisição.
Já o segundo then, recebe os dados da consulta, e pode tratar da maneira que preferir, nesse caso somente coloquei um console.log, mas esse dado poderia ser impresso em uma tela por exemplo.
Como fazer uma request do tipo POST
Outro tipo comum de requisição, é a do tipo POST, utilizada para inserir dados em alguma API.
Por exemplo, pense na tela de cadastro de usuários, é comum um usuário poder realizar um cadastro, e para se cadastrar precisa enviar os dados para algum backend, então esses dados são enviados com o método POST.
Para isso, será necessário passar alguns dados adicionais na API Fetch para que a requisição seja feita de forma correta, tanto com o método e também passando as informações.
A estrutura fica dessa forma:
fetch("url_da_api", {
// Tipo da requisição
method: "POST",
// Dados a serem enviados na requisição
body: JSON.stringify({
nome: "João",
idade: 30,
id: 1
}),
})
.then(response => response.json()) // Converter a resposta em json
.then(json => console.log(json)); // Mostrando a resposta no console
Repare que agora adicionamos a chave method, caso ela não seja passada, a API Fetch entende que é tipo GET por padrão, e quando passada, é possível definir os outros métodos, como PUT, POST, DELETE e entre outros.
Também adicionamos a chave body, que tem os dados que serão enviados para a API.
E logo abaixo tem o tratamento do retorno caso seja necessário.
Enviar cabeçalhos na requisição
É comum em requisições do tipo POST para uma API, ter que enviar dados adicionais, como por exemplo, um token de autenticação ou então o tipo de dados do conteúdo que está sendo enviado.
Para isso, podemos definir as chaves Authorization e Content-type dentro dos headers da requisição:
fetch("url_da_api", {
// Tipo da requisição
method: "POST",
// Dados a serem enviados na requisição
body: JSON.stringify({
nome: "João",
idade: 30,
id: 1
}),
// Dados enviados no cabeçalho da requisição
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`,
}
})
.then(response => response.json()) // Converter a resposta em json
.then(json => console.log(json)); // Mostrando a resposta no console
Repare que foi adicionado a nova chave headers, que é um objeto, e dentro são passados todas as chaves adicionais ao cabeçalho da requisição.
Lembrando que esses dados adicionais, são definidos pela API, se precisa de autenticação ou do tipo de dados por exemplo.
Vídeo
Caso queira, gravei um vídeo sobre o assunto:
Código fonte
O código fonte das requisições com API Fetch está no meu CodeSandbox, e você pode acessar neste link.
Conclusão
A API Fetch é muito utilizada hoje em dia, ela facilitou muito a parte de requisições para APIs direto no frontend.
Essa facilidade se deu com a forma de escrita mais simples da requisição, fácil de configurar a API Fetch, e também simples de tratar os dados de retorno.
Muito provavelmente você irá precisar utilizar no dia a dia este recurso, recomenda que aprenda bem API Fetch, pois irá ajudar muito.
Para ver outros canais onde o posto conteúdo veja os Links do Programando Soluções.
Desenvolvimento Web com HTML, CSS e JavaScript
Aprenda a testar Aplicações Javascript
Referências
https://daily-dev-tips.com/posts/fetch-api-in-vanilla-javascript/
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data
https://www.devmedia.com.br/javascript-fetch/41206
https://www.braziljs.org/p/fetch-api-e-o-javascript
https://www.geeksforgeeks.org/get-and-post-method-using-fetch-api/