Utilizando a Fetch API em JavaScript
O que é a Fetch API?
Resumidamente, a Fetch Api é uma interface que foi criada para auxiliar desenvolvedores em suas tarefas que envolvem requisições de rede. De modo mais geral, utilizada para requisições HTTP na web.
Por quê da "API" no nome?
Caso não saiba, API ou "Application Programming Interface" é um conjunto de regras, protocolos e ferramentas que permitem que diferentes aplicações ou seus componentes interajam entre si, mesmo que sejam construídos em linguagens ou plataformas diferentes.
A fetch possui essa denominação pois consegue fazer uma ponte de comunicação de seu código para um ou mais códigos diferentes. Por exemplo, você pode utilizá-la para trazer informações de outra aplicação sendo ela em Java, Ruby, Js, etc.
Funcionamento no código
A parte que mais nos interessa! Como podemos utilizar da fetch num código real?
Aqui temos uma estrutura simples para fetch:
1| fetch('https://www.urldeexemplo.com')
2| .then((res) => res.json())
3| .then((data) => console.log(data))
4| .catch((e) => console.log(e));
Como se pode ver pelo uso das funções then() e catch(), a interface fetch trabalha com promises, que são padrões do JavaScript que permitem organizar de forma mais clara funções assíncronas (aquelas que podem rodar enquanto outras tarefas do código também estão em sendo realizadas).
Mas o que representa cada linha desse código?
1 -> A fetch, por padrão, utiliza do método Http GET, ou seja, tenta obter uma informação que o servidor alvo disponibiliza.
Utilizamos da sua função para fazer uma requisição a url especificada como parâmetro, neste caso, para a 'https://www.urldeexemplo.com'. Essa parte do código voltará apenas uma Promise, ainda não tratada:
console.log(fetch(url)) // output: Promise { <pending> }
2, 3 -> Fazendo um encadeamento de função utilizando o then, conseguimos transformar essa promise em uma resposta, mas, o primeiro then volta outra promise, que deve ser tratada com um segundo then, desta forma:
const url = 'https://dummyjson.com/products' // armazenando a url em uma constante para
// reutilizá-la no código
fetch(url)
.then()
.then()
Como a resposta do primeiro then contém as informações em um fluxo de bytes e não um formato de dado humanamente legível, devemos transformá-la em um objeto como json ou um txt, para que seja um dado visualizável e manipulável. Podemos fazer isso utilizando callbacks (funções usadas como parâmetros em outras funções). Veja o exemplo abaixo:
Antes de transformar em um objeto json:
fetch(url)
.then()
.then((data) => console.log(data)) // output:
// Response {
// [Symbol(realm)]: null,
// [Symbol(state)]: {
// aborted: false,
// ...
// }
// }
Após:
fetch(url)
.then((res) => res.json())
.then((data) => console.log(data)) // output:
// {
// products: [
// {
// id: 1,
// title: 'iPhone 9',
// ...
// }
// ]
// }
4 -> A linha quatro representa uma ferramenta de captura de erros, tal qual um try catch normal da linguagem. Quando um erro acontece durante o fetch, o código dentro da função catch() será disparado, neste caso, um log do erro.
Representação da função GET:
O Fetch também realizar outros métodos HTTP como o UPDATE, o DELETE e o POST, enviando um corpo para o endpoint desejado. Exemplo:
fetch(`${url}/add`, // rota para adicionar ids
{
method: 'POST', // método da requisição
body: { id: 1 }, // corpo da requisição
}
)
.then((res) => res.json())
.then((data) => console.log(data))
.catch((err) => console.error(err));
Representação da função POST:
Conclusão:
A Api de Fetch é um recurso muito poderoso para requisições na web e base para muitas aplicações com este propósito. Mas, não se esqueça que também há muitas bibliotecas que também podem facilitar desenvolvedores no desenvolvimento web, como por exemplo, o Axios.
Documentações / Guias:
Obrigado pela leitura, caso sugestão de melhorias ou correção de erros, comentem!
