Axios vs Fetch()
Sabemos que o método que retemos mais informações, segundo a pirâmide do aprendizado desenvolvida por William Glasser é a de repassar seu conhecimento - 95% do conhecimento é aprendido quando temos que ensinar alguém, explicando, resumindo, definindo e estruturando o conhecimento.
Por esse motivo, venho humildemente repassar os meus conhecimentos sobre esses dois grandes pipeline HTTP:
- Axios - é um cliente baseado em Promissões para fazer as requisições, sendo considerado Full-Stack por poder utilizar o mesmo código tanto no lado do navegador como do node.js;
- Fetch() - veio para substituir o XMLHttpRequest, trazendo novidades como desabilitar o CORS ou usar API de cache como objeto de solicitação e resposta.
Uso bastante tempo somente Axios, mas nunca entendi muito bem por que usar somente Axios. Talvez seja por ser padrão do local onde eu colaboro ou por ser muito popular dentro do universo React.js. Não sei bem ao certo, mas sempre defino a prioridade do negócio juntamente com o método a ser desenvolvido.
Vamos juntos entender esses dois clientes de HTTP e poder assim escolher o melhor que nos atende em nosso projetos.
O mínimo sobre Mensagens HTTP
Geralmente as troca de informações, dentro de um ambiente Web é através do protocolo HTTP (Hypertext Transfer Protocol — Protocolo de Transferência de Hipertexto).
São dois tipos de troca de mensagens:
- Requests (requisição) - enviada pelo cliente para disparar uma ação no servidor;
- Responses (resposta) - retorna às solicitações do servidor para o cliente.
O cliente envia um pedido de acesso a uma página, e o servidor retorna uma resposta de permissão de acesso. Dentro desse pedido são enviados também os arquivos da página, que o usuário deseja acessar, que são compostas de informações textual codificadas em ASCII.
Temos também o HTTPS (Hyper Text Transfer Secure — Protocolo de Transferência de Hipertexto Seguro), que de forma rude, ele funciona exatamente com o HTTP, porém, ele tem uma camada de segurança a mais. São utilizada normalmente por e-commerce.
Estrutura básica
Antes de escolher qual pipeline HTTP vamos utilizar, precisamos analisar suas estruturas para saber se a curva de aprendizagem não vai ter um impacto na entrega do projeto. Antes de discutirmos mais a fundo, precisamos entender suas estrutura e suas propriedades.
Para podermos compreender melhor, vamos fazer uma requisição GET da API pública PokeApi V2↗ para obter informações de um Pokémon específico. Neste exemplo, utilizarei o Axios para fazer a solicitação HTTP.
Código Axios
const axios = require('axios');
const getPokemonInfo = async (pokemonName) => {
try {
const response = await axios.get(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`);
const pokemon = response.data;
console.log(`Nome: ${pokemon.name}`);
console.log(`Altura: ${pokemon.height}`);
console.log(`Peso: ${pokemon.weight}`);
console.log(`Habilidades: ${pokemon.abilities.map(ability => ability.ability.name).join(', ')}`);
} catch (error) {
console.error('Erro ao obter informações do Pokémon:', error.message);
}
};
// Chamada da função para obter informações do Pikachu
getPokemonInfo('bulbasaur');
Neste código, importamos o módulo Axios e definimos uma função assíncrona chamada getPokemonInfo. Dentro dessa função, utilizamos o await para fazer uma solicitação GET para a URL da PokeAPI, especificando o nome do Pokémon desejado como um parâmetro na URL.
Após recebermos a resposta da API, a propriedade data contém as informações do Pokémon. Neste exemplo, exibimos algumas informações básicas, como nome, altura, peso e habilidades do Pokémon na função console.log.
Caso ocorra algum erro durante a solicitação, utilizamos um bloco catch para capturar o erro e exibir uma mensagem apropriada no console. Por fim, chamamos a função getPokemonInfo passando o nome do Pokémon desejado, neste caso, "bulbasaur". Você pode alterar o nome do Pokémon na chamada da função para obter informações de outros Pokémon.
Lembre-se de ter o Axios instalado no seu projeto antes de executar o código. Você pode instalá-lo utilizando o comando npm install axios.
Código Featch()
const getPokemonInfo = (pokemonName) => {
fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName}`)
.then(response => {
if (!response.ok) {
throw new Error('Erro ao obter informações do Pokémon');
}
return response.json();
})
.then(pokemon => {
console.log(`Nome: ${pokemon.name}`);
console.log(`Altura: ${pokemon.height}`);
console.log(`Peso: ${pokemon.weight}`);
console.log(`Habilidades: ${pokemon.abilities.map(ability => ability.ability.name).join(', ')}`);
})
.catch(error => {
console.error('Erro ao obter informações do Pokémon:', error.message);
});
};
// Chamada da função para obter informações do Pikachu
getPokemonInfo('bulbasaur');
Neste exemplo, utilizamos o método fetch() para fazer uma solicitação GET para a URL da PokeAPI, assim como no exemplo anterior.
A diferença principal entre o Axios e o fetch() é a maneira como as respostas são tratadas. Com o fetch(), precisamos usar o método .then() para tratar a Promise retornada pela função fetch(). No primeiro .then(), verificamos se a resposta é válida (usando response.ok). Caso contrário, lançamos um erro.
Em seguida, usamos o método .json() para analisar a resposta em formato JSON. Esse método retorna uma Promise que é encadeada com outro .then(), onde podemos acessar os dados do Pokémon e exibi-los no console.
Caso ocorra algum erro durante a solicitação, usamos o método .catch() para capturar o erro e exibir uma mensagem apropriada no console.
Comparando com o exemplo anterior com Axios, a principal diferença é a sintaxe e o tratamento manual da Promise retornada pelo fetch(). O Axios oferece uma API mais amigável e simplificada, enquanto o fetch() é uma API de baixo nível que exige mais manipulação manual de Promises e tratamento de erros.
Vamos analisar cada um deles
Axios:
Axios é uma biblioteca de terceiros amplamente adotada para fazer requisições HTTP em JavaScript. Ele é uma solução abrangente e fornece uma API mais amigável em comparação com o fetch(). Algumas características notáveis do Axios são:
- Suporte a navegadores antigos: O Axios é compatível com uma ampla gama de navegadores, incluindo navegadores mais antigos. Ele lida com questões de compatibilidade e fornece uma camada de abstração consistente.
- Sintaxe simplificada: O Axios oferece uma sintaxe simplificada para fazer solicitações HTTP. Ele permite configurar facilmente as opções de solicitação, como headers, parâmetros e tipo de dados, usando métodos como
axios.get(),axios.post(), etc. - Manipulação automática de dados: O Axios facilita a manipulação de dados retornados pelas solicitações. Ele analisa automaticamente as respostas JSON e fornece acesso direto aos dados, evitando a necessidade de chamadas adicionais para obter os dados formatados corretamente.
- Interceptadores: O Axios permite o uso de interceptadores para modificar as solicitações e respostas antes de serem enviadas ou processadas. Isso é útil para adicionar headers personalizados, manipular erros, fazer autenticação, entre outras tarefas.
Fetch():
O método fetch() é uma função nativa do JavaScript para fazer requisições HTTP. Ele fornece uma maneira mais moderna de trabalhar com requisições assíncronas e respostas. Algumas características importantes do fetch() são:
- API de baixo nível: O fetch() é uma API de baixo nível e oferece um conjunto básico de recursos para fazer requisições HTTP. Ele é mais flexível em comparação com o Axios, permitindo mais controle manual sobre os detalhes da solicitação e resposta.
- Suporte a Promises: O fetch() retorna uma Promise, o que facilita o tratamento de solicitações assíncronas. É possível encadear Promises para realizar ações após a conclusão da solicitação.
- Requisições básicas: O fetch() oferece suporte a todos os métodos HTTP, como GET, POST, PUT, DELETE, etc. Ele pode ser usado para fazer solicitações básicas, mas pode exigir mais configuração manual em comparação com o Axios.
- Manipulação manual de dados: Ao contrário do Axios, o fetch() não realiza a análise automática dos dados de resposta. É necessário usar métodos como
.json(),.text(),.blob(), etc., para extrair os dados corretos da resposta. - Integração com os cabeçalhos de resposta: O fetch() permite acessar e usar os cabeçalhos de resposta diretamente, fornecendo mais controle sobre as informações retornadas pelo servidor.
Conclusão
Em resumo, o Axios oferece uma sintaxe mais simples e amigável, além de recursos adicionais, como suporte
A escolha entre Axios e fetch() dependerá das necessidades e requisitos do seu projeto. Se você precisa de uma API simples de usar, compatibilidade com navegadores antigos e recursos adicionais, o Axios pode ser uma boa opção. Por outro lado, se você prefere uma solução nativa do JavaScript, com menor dependência externa e está disposto a lidar com uma sintaxe mais verbosa, o fetch() pode ser mais adequado.