Introdução

No desenvolvimento web moderno, fazer solicitações HTTP é uma tarefa fundamental. Não importa se você está buscando dados de um servidor, enviando formulários ou interagindo com APIs, você precisa de ferramentas confiáveis ​​para lidar com essas operações. Enquanto o JavaScript fornece uma API de busca integrada para fazer solicitações HTTP, muitos desenvolvedores optam por bibliotecas de terceiros como Axios para funcionalidade e conveniência adicionais.

Por que precisamos de ferramentas de solicitação HTTP?

Lidar com solicitações e respostas HTTP pode ser complexo, especialmente quando se considera o tratamento de erros, análise de resposta e configuração de solicitação. Ferramentas como Axios e Fetch simplificam essas tarefas fornecendo abstrações e utilitários que agilizam o processo. Elas ajudam a resolver problemas comuns, como:

Boilerplate Code: Simplificando tarefas repetitivas como definir cabeçalhos e manipular respostas JSON.
Error Handling: Fornecendo mecanismos de manipulação de erros mais consistentes e gerenciáveis.
Interceptors: Permitindo pré-processamento de solicitações ou respostas, como adicionar tokens de autenticação.

Fetch API

A Fetch API é um método JavaScript moderno e integrado para fazer solicitações HTTP. Ela é baseada em promessas, fornecendo uma maneira mais direta de trabalhar com operações assíncronas em comparação a métodos mais antigos, como XMLHttpRequest.

Exemplo

// Making a GET request using Fetch
fetch('https://api.example.com/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('There was a problem with the fetch operation:', error));

Axios

Axios é uma biblioteca popular de terceiros para fazer solicitações HTTP. Ela é baseada em promessas como Fetch, mas inclui muitos recursos adicionais que a tornam mais conveniente e poderosa.

Exemplo

// Making a GET request using Axios
axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('There was a problem with the axios request:', error));

Principais diferenças

1. Tratamento padrão de JSON

- Fetch:
requer conversão manual de dados de resposta para JSON.

fetch('https://api.example.com/data')
  .then(response => response.json()) // Manual conversion
  .then(data => console.log(data));

- Axios:
analisa automaticamente respostas JSON.

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data)); // Automatic conversion

2. Tratamento de erros

- Fetch:
rejeita uma promessa somente para erros de rede, não para erros de HTTP (por exemplo, códigos de status 404 ou 500).

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

- Axios:
rejeita uma promessa para erros de rede e erros de HTTP.

axios.get('https://api.example.com/data')
  .catch(error => console.error('Axios error:', error));

3. Solicitar configuração

- Fetch:
requer configuração manual de opções como cabeçalhos e métodos

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

- Axios:
Fornece uma sintaxe mais concisa e legível para configuração.

axios.post('https://api.example.com/data', { key: 'value' }, {
  headers: {
    'Content-Type': 'application/json'
  }
});

Interceptadores

Interceptors são um recurso poderoso no Axios que permite interceptar solicitações ou respostas antes que elas sejam manipuladas por eles ou capturadas. Eles são úteis para tarefas como adicionar tokens de autenticação a cada solicitação ou manipular erros globalmente.

Exemplo de interceptadores Axios

// Adding a request interceptor
axios.interceptors.request.use(config => {
  // Add an authorization header to every request
  const token = 'your_token';
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  // Handle request error
  return Promise.reject(error);
});

// Adding a response interceptor
axios.interceptors.response.use(response => {
  // Handle successful response
  return response;
}, error => {
  // Handle response error
  if (error.response.status === 401) {
    // Handle unauthorized error
    console.error('Unauthorized');
  }
  return Promise.reject(error);
});

Conclusão

Tanto o Fetch quanto o Axios são ferramentas capazes de fazer solicitações HTTP, mas oferecem diferentes níveis de conveniência e funcionalidade. O Fetch é uma opção nativa e moderna que funciona bem para casos de uso simples, enquanto o Axios fornece um conjunto de recursos mais rico, incluindo tratamento automático de JSON, melhor gerenciamento de erros e interceptores para manipulação de solicitações e respostas. A escolha entre eles depende das necessidades específicas do seu projeto e da sua preferência por simplicidade versus funcionalidade.

Ao entender os pontos fortes e as diferenças de cada ferramenta, você pode tomar decisões mais informadas e escrever um código mais eficiente e sustentável.