Luísa Bezerra

Voltar para a Home

Axios vs. Fetch - Qual devo usar?

Luísa Bezerra
11 de maio de 2020 · 4 minutos de leitura

Ao entrarmos neste mundo de computeierers, a grande maioria fica meio perdida com tantos pacotes, opções e caminhos a se seguir. Por exemplo, na hora de fazer HTTP requests, por qual caminho ir? Neste post, vou abordar a biblioteca Axios e a API Fetch de uma forma comparativa, mostrando suas diferenças. Lembrando: qual usar é uma decisão sua, mas é legal ponderar os ganhos e perdas de cada lado, belê?! 😁

Mas… quem são estes dois?

Quando queremos nos comunicar com os servers por meio do protocolo HTTP, mandar requests, buscar dados, dentre outros, é bem comum ouvirmos falar de Axios ou Fetch. Podemos resumir essa operação ao termo AJAX (Asynchronous JavaScript And XML), que usa XMLHttpRequests para se comunicar com o servidor.

Axios

O Axios é uma biblioteca do Javascript usada para fazer HTTP requests do node.js ou XMLHttpRequests dos browsers, com suporte da Promise API que é nativa desde o JS ES6. De acordo com sua especificação:

  • Faz XMLHttpRequests a partir do browser
  • Faz HTTP requests a partir do node.js
  • Suporta a Promise API
  • Intercepta requests e responses
  • Transforma dados de requests e responses
  • Cancela requests
  • Faz transformações automáticas para dados JSON
  • Proteção no client side contra XSRF

Como a biblioteca Axios não é nativa na API do Javascript, temos que importá-la no projeto. O passo a passo da sua instalação você pode conferir diretamente neste link!

API Fetch

A API Fetch fornece uma interface para buscar recursos (por exemplo, em toda a rede). De acordo com sua especificação, o Fetch fornece uma definição genérica de objetos de Requests e Response. Ela também utiliza Promises e fornece um método global fetch(), e por meio dele são feitas as buscas por recursos de forma assíncrona na rede. Este método somente exige, como argumento obrigatório, o caminho para o recurso que se deseja obter. Ele retorna uma promessa que resolve a response para esta requisição, seja ele bem-sucedido ou não.

Compatibilidade

Apesar da similaridade e de serem compatíveis com Google Chrome, Safari, Opera, e Edge, a compatibilidade do Axios com versões anteriores de browsers é melhor. Para o IE 11, o Fetch não é compatível, enquanto o Axios dá um show de suporte, não apresentando problema algum. A tabela de compatibilidade do Fetch pode ser vista abaixo, retirada do site Can I Use:

Compatibilidade de Fetch com diferentes versões de browsers
Compatibilidade de Fetch com diferentes versões de browsers

Segurança

Neste ponto, Axios se mostra menos vulnerável. Como visto em sua especificação, ele tem uma proteção no client side contra XSRF (Cross Site Request Forgery), que é um dos ataques mais conhecidos desde… sempre?! Basicamente (e bem por cima, pois isso não é bem a minha área), ele ocorre em situações em que uma chamada HTTP é feita entre sites, onde tenta-se passar por um usuário do sistema. A idéia é criar uma falsificação de solicitação mesmo, garantindo poderes de acesso sob o usuário fraudado (vítima do ataque). Mais informações aqui!

Sintaxe

Quando começamos a comparar Axios e Fetch, é importante discernir que na sintaxe básica eles têm uma diferenciação clara. Para exemplificar, irei utilizar a PokéAPI, que nada mais é do que uma RESTful API baseada em Pokémon. Logo abaixo é possível conferir o método GET de Axios e Fetch.

1const url = 'https://pokeapi.co/api/v2/pokemon/ninetales';
2
3// Axios
4axios.get(url)
5 .then(response => console.log(response));
6
7// Fetch
8fetch(url)
9 .then(response => response.json())
10 .then(data => console.log(data));

Se você nunca viu nada sobre os dois, tenho certeza de que vai se perguntar o porquê de ter sido utilizado o método .json() no caso de Fetch. Acontece que isso também ocorre com o Axios, mas ele faz a transformação automática em JSON quando a request é resolvida! Um passo a menos sempre é bom, né?!

Interceptando Requests e Responses

No geral, interceptores HTTP são bons para examinarmos as solicitações HTTP feitas da nossa aplicação para o servidor. São bons para fazer execuções de códigos ou alterações nas requests ou responses antes de serem iniciadas. O Fetch não garante uma forma de interceptar as HTTP requests, mas é possível resolver isso sobrescrevendo o método global fetch(), criando seu próprio interceptor.

Enquanto isso, o Axios já tem seu interceptador, que são executadas antes mesmo das promessas de .then ou .catch, sendo um exemplo:

1axios.interceptors.request.use(
2 config => {
3 // aqui pode ser feita alguma coisa com seus dados de request, é só colocar o código
4 console.log('Uma request foi enviada!');
5 return config;
6 }, (error) => {
7 return Promise.reject(error);
8 }
9);
10
11axios.interceptors.response.use(
12 config => {
13 // aqui pode ser feita alguma coisa com seus dados de response, é só colocar o código
14 console.log('Uma request foi recebida!');
15 return config;
16 }, (error) => {
17 return Promise.reject(error);
18 }
19);
20
21axios.get('https://pokeapi.co/api/v2/pokemon/ninetales')
22 .then(response => console.log(response));

Timeout e Progresso

Uma das coisas que acho bem legal que o Axios apresenta e o Fetch não é o timeout como uma de suas configurações, que é o tempo limite antes de ser abortada a request. O timeout é uma das configurações opcionais possíveis de serem passadas dentro do objeto config enviado, e é setado em milissegundos. Importante lembrar que o timeout é uma response timeout e não uma connection timeout. Um exemplo abaixo de seu uso:

1axios.get(
2 'https://pokeapi.co/api/v2/pokemon/ninetales',
3 {
4 timeout: 10
5 }
6)
7 .then(response => console.log(response));

Na questão de progresso, temos outro motivo pra preferir Axios: ele apresenta uma simples forma de acessar o progresso de sua requisição. É uma forma de dar um “retorno” para os usuários que estão com a internet mais lenta, por exempo, de suas solicitações ao servidor, ou em casos de envio de uma request bem grande. O onUploadProgress também é uma das configurações opcionais passadas dentro do objeto config.

Lidando com Erros

Com Axios, lidar com erros é bem mais tranquilo. Responses do tipo 404 ou 500 já rejeitam automaticamente a resposta, diferentemente de Fetch, onde mesmo as responses do tipo 404 ou 500 ainda são resolvidas - ou seja, se o backend retorna um código de “500 Internal Server Error”, o Fetch vai lidar da mesma forma que lida com o código “200 OK”. Para lidar com isso em Fetch, utilizamos a flag “ok”, um exemplo:

1fetch('https://pokeapi.co/api/v2/pokemon/a*b/') // response do tipo 404
2 .then(response => {
3 if (!response.ok) {
4 throw Error(response.statusText)
5 }
6 return response.json()
7 })
8 .then(data => {
9 console.log(data)
10 })
11 .catch(error => console.error(error))

No caso de Axios, um exemplo simples de cobertura de erros pode ser visto abaixo:

1axios
2 .get('https://pokeapi.co/api/v2/pokemon/a*b/') // response do tipo 404
3 .then(response => {
4 console.log("response", response)
5 })
6 .catch(error => console.log(error))

Conclusão

É bem claro que Axios apresenta uma maior facilidade de uso quando comparado com o Fetch. Outros pontos também que podem ser levados em conta é que, se você se preocupa com o peso da página, é válido lembrar que o Axios pesa 4.52 kB (Minified + Gzipped), e fetch já é incorporado ao browser, ou seja, pesa um total de 0k. Eu particularmente uso Axios atualmente em meus projetos, mas isso não é uma regra!

E AGRADEÇO A VOCÊ DE TER CHEGADO ATÉ AQUI <3 este é meu primeiro post, então qualquer coisa que queira acrescentar, sinta-se mais que convidado! Sugestões, dicas, dúvidas, dentre outros, pode também deixar nos comentários, ou me mandar via email/redes sociais.

© 2020 Luísa Bezerra
Link to $https://github.com/luisarbezerraLink to $https://instagram.com/luisarbezerraLink to $https://www.linkedin.com/in/luisarbezerra