Bom se você chegou até aqui já deve ter usado uma das duas ou as duas opções e possivelmente você possui algumas dúvidas de quando utilizá-las. Mas aí vem a dúvida, qual devo usar? Qual é a mais adequada para minha aplicação? Então antes de mais nada, você deve saber a diferença de cada uma.

 

O Axios é uma biblioteca que possui a finalidade fazer requisições http, a partir do node, mas biblioteca essa, que não é nativa JavaScript, portanto é necessário importá-la.

 

O Fetch é uma API que fornece uma interface para manipular partes do http(pedidos e respostas).

 

Como é a sintaxe

 

Axios
axios.get(xxx)
.then(response => console.log(response));

 
Fetch
fetch(xxx)
.then(response => response.json())
.then(data => console.log(data));

 

No caso do fetch é necessário o uso do método .json(), o que se torna um passo a mais para pegar a resposta da sua requisição.

 

Catches ou erros

 

No caso a seguir vemos um exemplo onde a url não existe gerando uma resposta 404, vemos como cada uma das soluções trata o erro de forma diferente, no caso do fetch ele entende que tanto um erro 404 ou 500 são tratados como ok como um status code 200 então usamos esse response.ok, forçamos um status de erro para cair no catch.

 

Fetch fetch(xxx) .then((response) => { if (!response.ok) { throw Error(response.statusText) } return response.json(); }) .then(data => {console.log(data)}) .catch(error => console.error(error));

 

Já o axios se comporta diferente com relação aos erros, então tanto erros da família 404 ou 500 caem diretamente no catch sem precisar forçar um erro na chamada, ele só entende como status code 200 quando ouve uma resposta de sucesso, o que corresponde ao response.ok do fetch.

 

Axios axios.get(xxx) .then((response) => { console.log("response", response) }) .catch(error => console.log(error));

 

Requests simultâneos

 

Para fazer múltiplos requests simultâneos axios possui o método all() que retorna um array e utilizando o método spread() é possível separá-los.

 

axios.all([
axios.get(xxx),
axios.get(xxx)
])
.then(axios.spread((response1, response2) => {
// ambos os requests estão completos
console.log(response1, ' - ', response2);
}));

 

Com fetch é possível fazer a mesma coisa com com Promise.all() complementando com o async:

 

Promise.all([
fetch(xxx),
fetch(xxx)
])
.then(async([response1, response2]) => {
const user1 = await response1.json();
const user2 = await response2.json();
console.log(user1, ' - ', user2);
})
.catch(error => {
console.log(error);
});

 

Interceptors

 

Interceptors são formas de fazer execuções no código antes de serem iniciados o que não ocorre com o fetch, no caso você teria que implementar o próprio interceptor.

 

axios.interceptors.request.use(
config => {
console.log('Request foi feita');
return config;
}, (error) => {
return Promise.reject(error);
}
);

 

axios.interceptors.response.use(
config => {
console.log('Resposta');
return config;
}, (error) => {
return Promise.reject(error);
}
);

 

axios.get('xxx)
.then(response => console.log(response));

 

Timeout

 

Nisso o Axios permite com simplicidade usar a opção de timeout na configuração, informando então, o tempo em milissegundos andtes da requisição ser abortada como é demonstrada no exemplo abaixo:

 

axios.post('/post',{
timeout: 3000, // 3 segundos timeout
data: {
title: 'Uma breve história',
text: 'Era uma vez..'
}
})
.then(response => console.log('resposta'))
.catch(error => console.error('timeout'))

 

Conclusão

 

Vimos inúmeras vantagens de se trabalhar com o Axios, como os interceptors, timeout, tratamento e erros são extremamente fáceis de serem implementadas. Porém a maioria desses recursos podem ser implementados com o fetch com um pouco mais de mão de obra. Cabe a você verificar o tempo disponível com a equipe e quais os benefícios que vocês teriam utilizando um ou outro, se vale colocar uma lib somente para isso ou se o fetch já suporta, se vocês trabalham como APIs nativas ou externas, vale a pena considerar todos os ângulos antes de partir para implementação.