Axios vs Fetch: Qual é o Melhor para Requisições HTTP

As solicitações HTTP são essenciais para se comunicar com servidores e APIs em aplicações web. Existem muitas maneiras de fazer solicitações HTTP em JavaScript, mas duas das mais populares são Axios e fetch(). Neste post, vamos comparar e contrastar Axios e Fetch() e ver qual é melhor para diferentes cenários.

O que é Axios?

Axios é uma biblioteca de terceiros que fornece um cliente HTTP baseado em promessas para fazer solicitações HTTP. Axios é amplamente utilizado na comunidade JavaScript e é conhecido por sua simplicidade e flexibilidade.

Sintaxe Básica do Axios

A sintaxe básica da biblioteca Axios é a seguinte:

axios(config)
  .then(response => console.log(response.data))
  .catch(error => console.error('Erro:', error));

Principais recursos:

1. Pode aceitar um objeto contendo tanto a URL quanto a configuração como parâmetro, ou objetos de URL e configuração separados.
2. Usa a propriedade data para enviar dados ao servidor, lidando automaticamente com a conversão de JSON.
3. Retorna os dados do servidor diretamente na propriedade data do objeto de resposta.
4. Manipula automaticamente os códigos de status de erro HTTP, passando-os para o bloco catch.
5. Fornece um mecanismo de manipulação de erros mais simplificado.

Exemplo:

axios({
  method: 'post',
  url: 'https://api.example.com/data',
  data: {
    key: 'value'
  }
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (error.response) {
      console.error('O servidor respondeu com:', error.response.status);
    } else if (error.request) {
      console.error('Nenhuma resposta recebida');
    } else {
      console.error('Erro:', error.message);
    }
  });

Por que você deve usar Axios?

Ele possui muitos recursos que facilitam e tornam conveniente seu uso, como:

• Transformação automática de dados JSON: Axios converte automaticamente os dados para e de JSON, para que você não tenha que analisá-los ou stringificá-los manualmente.
• Timeout de resposta: Axios permite que você defina um tempo limite para suas solicitações, para que você possa lidar com erros se o servidor levar muito tempo para responder.
• Interceptores HTTP: Axios permite que você intercepte solicitações e respostas antes que sejam tratadas pelo then ou catch, para que você possa modificá-las ou adicionar lógica adicional.
• Progresso de download: Axios pode acompanhar o progresso de seus downloads e uploads, para que você possa exibir feedback ao usuário ou cancelar a solicitação, se necessário.
• Solicitações simultâneas: Axios pode fazer múltiplas solicitações ao mesmo tempo e combiná-las em uma única resposta usando axios.all e axios.spread.

O que é Fetch()?

fetch() é uma API embutida que vem com o JavaScript nativo. É uma API web assíncrona que retorna os dados na forma de promessas. fetch() é suportado por todos os navegadores modernos, portanto, você não precisa importar nenhuma biblioteca externa para usá-lo. Alguns dos recursos do fetch() são:

• Sintaxe básica: fetch() tem uma sintaxe simples e concisa que leva a URL do recurso que você deseja buscar como o primeiro argumento e um objeto de opções opcional como o segundo argumento.
• Compatibilidade retroativa: fetch() pode ser usado em navegadores mais antigos que não o suportam nativamente, usando um polyfill, como whatwg-fetch ou fetch-ponyfill.
• Personalizável: fetch() dá a você mais controle sobre suas solicitações e respostas, pois você pode personalizar os cabeçalhos, corpo, método, modo, credenciais, cache, redirecionamento e políticas de referência.

Como Usar Axios para Fazer Solicitações HTTP?

Para usar Axios, você precisa instalá-lo usando npm ou yarn:

npm install axios

E aqui está como instalar Axios usando yarn:

yarn add axios

Se você preferir usar pnpm, pode instalar o Axios usando o seguinte comando:

pnpm install axios

Alternativamente, você pode usar uma rede de entrega de conteúdo (CDN) para incluir Axios em seu projeto. Aqui está como incluir o Axios usando um CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Então, você pode importá-lo em seu arquivo JavaScript e usá-lo para fazer solicitações HTTP. Por exemplo, para fazer uma solicitação GET para uma URL, você pode usar axios.get():

import axios from 'axios';

axios.get('https://example.com/api')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Fazendo Solicitações HTTP com Fetch

Para usar fetch(), você não precisa instalar nada, pois já está disponível no navegador. Você pode usar a função fetch() para fazer solicitações HTTP. Por exemplo, para fazer uma solicitação GET para uma URL, você pode usar o fetch() assim:

fetch('https://example.com/api')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Observe que:

• Axios transforma automaticamente os dados para e de JSON, enquanto fetch() exige que você chame response.json() para analisar os dados em um objeto JavaScript.
• Axios fornece os dados no objeto de resposta, enquanto fetch() fornece o próprio objeto de resposta, que contém outras informações, como status, cabeçalhos e URL.
• Axios lida com erros no bloco catch, enquanto fetch() somente rejeita a promessa se houver um erro de rede, não se a resposta tiver um status de erro.

Sintaxe Básica do Fetch

Certo. Eu fornecerei o conteúdo em inglês, organizado em duas partes separadas, conforme solicitado.

A sintaxe básica da API Fetch é a seguinte:

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erro:', error));

Principais recursos:

1. URL como o primeiro argumento, objeto de configuração opcional como o segundo argumento.
2. Usa a propriedade body para enviar dados ao servidor, exigindo conversão manual dos dados para string.
3. Retorna um objeto Response contendo informações completas da resposta.
4. Somente entra no bloco catch em erros de rede, não em códigos de status de erro HTTP.
5. Exige verificação manual dos códigos de status de resposta para lidar com erros HTTP.

Exemplo:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Erro HTTP ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Erro:', error));

Axios vs Fetch: Enviando uma Solicitação GET com Parâmetros de Consulta:

// Axios
axios.get('/api/data', {
  params: {
    name: 'Alice',
    age: 25
  }
})
.then(response => {
  // lidar com a resposta
})
.catch(error => {
  // lidar com o erro
});

// Fetch
const url = new URL('/api/data');
url.searchParams.append('name', 'Alice');
url.searchParams.append('age', 25);

fetch(url)
.then(response => response.json())
.then(data => {
  // lidar com os dados
})
.catch(error => {
  // lidar com o erro
});

Axios vs Fetch: Enviando uma Solicitação POST com um Corpo JSON:

// Axios
axios.post('/api/data', {
  name: 'Bob',
  age: 30
})
.then(response => {
  // lidar com a resposta
})
.catch(error => {
  // lidar com o erro
});

// Fetch
fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Bob',
    age: 30
  })
})
.then(response => response.json())
.then(data => {
  // lidar com os dados
})
.catch(error => {
  // lidar com o erro
});

Axios vs Fetch: Definindo um Timeout para a Solicitação:

// Axios
axios.get('/api/data', {
  timeout: 5000 // 5 segundos
})
.then(response => {
  // lidar com a resposta
})
.catch(error => {
  // lidar com o erro
});

// Fetch
const controller = new AbortController();
const signal = controller.signal;

setTimeout(() => {
  controller.abort(); // abortar após 5 segundos
}, 5000);

fetch('/api/data', { signal })
.then(response => response.json())
.then(data => {
  // lidar com os dados
})
.catch(error => {
  // lidar com o erro
});

Axios vs Fetch: Usando a Sintaxe async/await:

// Axios
async function getData() {
  try {
    const response = await axios.get('/api/data');
    // lidar com a resposta
  } catch (error) {
    // lidar com o erro
  }
}

// Fetch
async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    // lidar com os dados
  } catch (error) {
    // lidar com o erro
  }
}

Axios vs Fetch: Compatibilidade Retroativa

A compatibilidade retroativa refere-se à capacidade de um sistema ou aplicação mais novo de funcionar com versões antigas, garantindo uma transição suave e prevenção de interrupções ou falhas ao atualizar. É crucial no desenvolvimento de software, desenvolvimento web e ecossistemas de tecnologia para manter a estabilidade, compatibilidade e versões e plataformas consistentes.

Axios:

• Axios é uma biblioteca de terceiros que precisa ser instalada e incluída em seu projeto.
• Suporta navegadores antigos incluindo polyfills para promessas e outros recursos modernos do JavaScript.
• Axios é ativamente mantido e acompanha as últimas atualizações de navegador e Node.js, garantindo compatibilidade com novos ambientes.
• No entanto, como é uma biblioteca separada, você precisa garantir que está usando uma versão compatível com as dependências do seu projeto.

Fetch:

• A API Fetch é uma API Web nativa suportada por navegadores modernos.
• Tem excelente suporte nas versões recentes dos navegadores, mas navegadores mais antigos (como Internet Explorer) não a suportam nativamente.
• Se você precisar dar suporte a navegadores mais antigos, precisará incluir um polyfill ou usar uma solução alternativa (por exemplo, XMLHttpRequest).
• Como é uma API nativa, é automaticamente atualizada e mantida pelos fornecedores de navegador, garantindo compatibilidade com futuras versões de navegadores.

Axios vs Fetch: Manipulação de Erros

A manipulação de erros é um aspecto importante de fazer solicitações HTTP, pois permite que você lide com diferentes cenários, como falhas de rede, erros de servidor ou respostas inválidas. Fetch e Axios têm maneiras diferentes de lidar com erros, que eu vou comparar com alguns exemplos.

Axios:

No Axios, se houver uma falha na solicitação, ele gera um erro e você pode facilmente lidar com o erro com um bloco try-catch e obter os dados do erro de error.response.data. Por exemplo:

// Manipulação de erros do Axios com try-catch
try {
  const response = await axios.get('/api/data');
  // lidar com a resposta
} catch (error) {
  // lidar com o erro
  console.log(error.response.data);
}

Fetch:

No Fetch, se houver uma falha na solicitação, ele não gera um erro, mas retorna um objeto de resposta com a propriedade ok definida como falsa. Você deve verificar a propriedade ok e lançar um erro manualmente se quiser usar um bloco try-catch.

Alternativamente, você pode usar a propriedade response.ok para manipular diferentes casos no método then. Por exemplo:

// Manipulação de erros do Fetch com try-catch
try {
  const response = await fetch('/api/data');
  // verificar status da resposta
  if (!response.ok) {
    // lançar erro se o status não for ok
    throw new Error(`Erro HTTP! status: ${response.status}`);
  }
  // lidar com a resposta
} catch (error) {
  // lidar com o erro
  console.log(error.message);
}

// Manipulação de erros do Fetch com response.ok
fetch('/api/data')
  .then(response => {
    // verificar status da resposta
    if (response.ok) {
      // lidar com a resposta
    } else {
      // lidar com o erro
      console.log(`Erro HTTP! status: ${response.status}`);
    }
  })
  .catch(error => {
    // lidar com erro de rede
    console.log(error.message);
  });

Outra diferença entre Fetch e Axios é como eles lidam com códigos de status não 200. Axios considera qualquer código de status fora da faixa 2xx como um erro e rejeita a promessa. Fetch considera qualquer resposta HTTP válida (mesmo 4xx ou 5xx) como um sucesso e resolve a promessa.

Isso significa que você tem que tratar códigos de status não 200 de forma diferente no Fetch e no Axios. Por exemplo:

// Manipulação de erros do Axios para códigos de status não 200
axios.get('/api/data')
  .then(response => {
    // lidar com a resposta
  })
  .catch(error => {
    // lidar com o erro
    if (error.response) {
      // o servidor respondeu com um código de status fora de 2xx
      console.log(error.response.status);
      console.log(error.response.data);
    } else {
      // erro de rede ou solicitação foi abortada
      console.log(error.message);
    }
  });

// Manipulação de erros do Fetch para códigos de status não 200
fetch('/api/data')
  .then(response => {
    // verificar status da resposta
    if (response.ok) {
      // lidar com a resposta
    } else {
      // o servidor respondeu com um código de status fora de 2xx
      console.log(response.status);
      return response.json();
    }
  })
  .then(data => {
    // lidar com os dados de erro
    console.log(data);
  })
  .catch(error => {
    // lidar com erro de rede ou solicitação foi abortada
    console.log(error.message);
  });

Axios vs Fetch: Qual é o Melhor para Fazer Solicitações HTTP?

Não existe uma resposta definitiva sobre qual é melhor, pois depende de suas preferências e necessidades. No entanto, aqui estão algumas diretrizes gerais para ajudá-lo a decidir:

• Use Axios se você quiser uma maneira simples e conveniente de fazer solicitações HTTP, com recursos como transformação automática de dados JSON, timeout de resposta, interceptores HTTP, progresso de download e solicitações simultâneas.
• Use fetch() se você quiser uma maneira nativa e personalizável de fazer solicitações HTTP, com recursos como compatibilidade retroativa, cabeçalhos personalizados, corpo, método, modo, credenciais, cache, redirecionamento e políticas de referência.

Gerar Código Axios/Fetch com Apidog

Apidog é uma plataforma colaborativa de desenvolvimento de APIs tudo-em-um que fornece um conjunto abrangente de ferramentas para projetar, depurar, testar, publicar e simular APIs. Apidog permite que você crie automaticamente código Axios para fazer solicitações HTTP.

Aqui está o processo para usar o Apidog para gerar código Axios:

Passo 1: Abra o Apidog e selecione nova solicitação

Passo 2: Insira a URL do endpoint da API para o qual deseja enviar uma solicitação, insira quaisquer cabeçalhos ou parâmetros de string de consulta que você deseja incluir com a solicitação, e clique em "Design" para mudar para a interface de design do Apidog.

Passo 3: Selecione "Gerar código do cliente " para gerar seu código.

Passo 4: Copie o código Axios gerado e cole-o em seu projeto.

Usando Apidog para Enviar Solicitações HTTP

Apidog oferece vários recursos avançados que aprimoram ainda mais sua capacidade de testar solicitações HTTP. Esses recursos permitem que você personalize suas solicitações e lide com cenários mais complexos sem esforço.

Passo 1: Abra o Apidog e crie uma nova solicitação.

Passo 2: Encontre ou insira manualmente os detalhes da API para a solicitação POST que você deseja fazer.

Passo 3: Preencha os parâmetros necessários e qualquer dado que você deseja incluir no corpo da solicitação.

Conclusão

Tanto o Axios quanto o fetch() são métodos poderosos e confiáveis para fazer solicitações HTTP em JavaScript. Você pode escolher aquele que se adapta melhor ao seu projeto e estilo, ou até mesmo usar ambos para diferentes propósitos. O importante é entender como eles funcionam e como usá-los de forma eficaz.

Usar o Apidog não só economiza seu tempo e esforço valiosos, mas também garante que seu código esteja preciso e livre de erros. Com sua interface amigável e recursos intuitivos, o Apidog é uma ferramenta indispensável para qualquer desenvolvedor que trabalhe com solicitações Axios. Boa codificação!