Axios ou Fetch: o que usar em 2019?

Axios é uma biblioteca JavaScript bem conhecida. É um cliente HTTP baseado em promessa para navegadores e Node.js. Se você trabalhou como programador JavaScript nos últimos anos, definitivamente utilizou esta biblioteca. Em outubro de 2019, o pacote Axios foi baixado da npm 25 milhões de vezes. Parece que o futuro do Axios é sem nuvens. Mas e se eu lhe disser que o Axios é um projeto morto? É exatamente disso que tratava uma discussão no Reddit. Ou seja, estamos falando sobre o seguinte:

• O repositório do Axios GitHub tem um nível muito baixo de atividade do desenvolvedor.
• Problemas e relações públicas são ignorados.
• A equipe de desenvolvimento está em silêncio.

A situação é agravada pela vulnerabilidade amplamente discutida. Esta vulnerabilidade foi relatada em 2017. Os autores do projeto a ignoraram por mais de dois anos.

Quando a biblioteca Axios se tornou popular, os navegadores não tinham uma API que implementa um cliente HTTP baseado em promessa. A interface XML HTTP Request (XHR) padrão era inconveniente, era difícil trabalhar com ela. Os desenvolvedores aceitaram com prazer o Axios devido ao fato de que essa biblioteca tornou sua vida mais fácil.



A API de busca foi lançada em 2015. Por que ainda estamos usando o Axios em 2019? Vamos comparar essas duas tecnologias.

Volume do código do modelo

▍Fetch

fetch('https://jsonplaceholder.typicode.com/todos/1')   .then(response => response.json())   .then(json => console.log(json)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // } 

▍Axios

 axios.get("https://jsonplaceholder.typicode.com/todos/1")  .then(response => console.log("response", response.data)) // { //  "userId": 1, //  "id": 1, //  "title": "delectus aut autem", //  "completed": false // } 

Ao usar o Fetch, você precisa lidar com duas promessas. Porém, ao trabalhar com o Axios, temos acesso direto ao resultado JSON na propriedade de data do objeto de resposta.

O método body mixin json() pega um fluxo de resposta e o lê completamente. Ele retorna uma promessa que é resolvida pelo resultado JSON da análise do texto do corpo da solicitação.

Você precisa usar ainda mais código padrão no Fetch ao trabalhar com solicitações POST.

▍Fetch

 fetch("https://jsonplaceholder.typicode.com/posts", {  method: "POST",  body: JSON.stringify({    title: "Title of post",    body: "Post Body"  }) })  .then(res => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log(data))  .catch(error => console.log(error)); 

▍Axios

 axios  .post("https://jsonplaceholder.typicode.com/posts", {    title: "Title of post",    body: "Body of post"  })  .then(response => console.log(response.data))  .catch(error => console.log(error)); 

O uso do Axios evita a gravação de grandes quantidades de código padrão e torna o código mais limpo e claro.

Tratamento de erros

▍Fetch

 fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    if (!response.ok) throw Error(response.statusText);    return response.json();  })  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); // error Error: Not Found 

▍Axios

 axios  .get("https://jsonplaceholder.typicode.com/todos/100000")  .then(response => {    console.log("response", response);  })  .catch(error => {    console.log("error", error);  }); // error Error: Not Found 

A biblioteca Axios relata erros de rede, mas a API Fetch não. Ao trabalhar com a Busca, você sempre precisa verificar a propriedade response.ok . Para simplificar a solução desse problema, a verificação desse erro pode ser emitida como uma função separada:

 const checkForError = response => {  if (!response.ok) throw Error(response.statusText);  return response.json(); }; fetch("https://jsonplaceholder.typicode.com/todos/100000")  .then(checkForError)  .then(data => console.log("data", data))  .catch(error => {    console.log("error", error);  }); 

Recursos ausentes

O Axios pode monitorar o progresso do upload de dados. A busca não suporta isso. Isso pode ser um fator decisivo na escolha da tecnologia para aqueles que estão desenvolvendo um aplicativo que permite aos usuários fazer upload de fotos ou arquivos de vídeo no servidor.

 const config = {  onUploadProgress: event => console.log(event.loaded) }; axios.put("/api", data, config); 

Bibliotecas alternativas

Aqui estão algumas alternativas para o Axios e a API Fetch:

• Ky é um cliente HTTP miniatura e inteligente baseado em window.fetch .
• Superagent é uma pequena biblioteca cliente HTTP progressiva baseada em XMLHttpRequest .

Sumário

O que devo usar em 2019? Depende muito. Por exemplo, se você precisar acompanhar o andamento do upload de materiais para um servidor, o Axios ou o Superagent é melhor para você. Se você pode lidar com as limitações de Buscar, é melhor usar esta API. E, para melhorar um pouco o código de busca, tente uma biblioteca de wrapper como o Ky.

Caros leitores! Quais clientes HTTP você usa em seus projetos?