Axios vs Fetch

#webdev #frontend #programming #javascript

Versão em português

Axios e Fetch são ferramentas populares para fazer requisições HTTP em JavaScript, mas possuem algumas diferenças chave. Aqui está um resumo:

Axios

Recursos Embutidos: O Axios vem com muitos recursos embutidos, como transformação automática de JSON, interceptores de requisição e resposta, e cancelamento de requisições.
Compatibilidade com Navegadores: Suporta navegadores mais antigos, incluindo o Internet Explorer.
Tratamento de Erros: O Axios rejeita automaticamente promessas para status de erro HTTP (como 404 ou 500), facilitando o tratamento de erros.
Interceptores de Requisição/Resposta: Permite modificar requisições ou respostas globalmente de forma simples.
Cancelamento de Requisições: O Axios oferece uma maneira fácil de cancelar requisições.

Fetch

API Nativa: Fetch é uma API nativa da web, ou seja, não é necessário instalar bibliotecas adicionais.
Baseado em Promessas: Utiliza Promessas, mas é necessário verificar manualmente o status da resposta para erros.
Manipulação de Streams: Fetch suporta streaming, o que pode ser útil para lidar com grandes respostas.
Mais Controle: Oferece mais controle sobre requisições, mas requer mais código adicional para recursos como configuração de padrões ou interceptação de requisições.
Sem Suporte Embutido para JSON: É necessário chamar .json() no objeto de resposta para analisar dados JSON.

Casos de Uso

Use Axios se precisar de um conjunto rico de recursos prontos para uso, especialmente para aplicações complexas.
Use Fetch para casos de uso mais simples ou quando quiser evitar dependências externas.

Exemplo de Uso

Axios:

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

Fetch:

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

Observações:

Para enviar dados, fetch() usa a propriedade body para uma requisição POST, enquanto o Axios usa a propriedade data.
Os dados em fetch() são transformados em uma string usando o método JSON.stringify.
O Axios transforma automaticamente os dados retornados do servidor, mas com fetch(), é necessário chamar o método response.json() para analisar os dados em um objeto JavaScript.
Com Axios, a resposta de dados fornecida pelo servidor pode ser acessada dentro do objeto data, enquanto no método fetch(), os dados finais podem ser nomeados com qualquer variável.

Conclusão

Ambos têm seus pontos fortes, e a escolha muitas vezes depende das suas necessidades específicas e preferências. Se você estiver construindo uma aplicação maior com muitas interações de API, o Axios pode facilitar algumas tarefas, enquanto o Fetch é ótimo para tarefas diretas.

O Axios oferece uma API amigável que simplifica a maioria das tarefas de comunicação HTTP. No entanto, se você prefere usar recursos nativos do navegador, definitivamente pode implementar funcionalidades semelhantes por conta própria com a API Fetch.

Como exploramos, é totalmente viável replicar os recursos essenciais do Axios usando o método fetch() disponível nos navegadores. A decisão de incluir uma biblioteca HTTP do cliente depende, em última análise, do seu conforto com APIs nativas e dos requisitos específicos do seu projeto.

Para mais informações: https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59

DEV Community