Integração de Bibliotecas de Terceiros em JavaScript

Além da função nativa fetch(), existem diversas bibliotecas de terceiros disponíveis para realizar requisições HTTP em JavaScript. Uma das bibliotecas mais populares é o Axios ( Documentação do Axios). Essas bibliotecas oferecem recursos e benefícios adicionais que podem simplificar o trabalho com APIs e melhorar a legibilidade do código.

Por que utilizar Axios ou outras bibliotecas em vez do fetch() nativo?

Embora a API fetch() seja poderosa, ela possui algumas limitações que bibliotecas de terceiros como o Axios resolvem:

• Análise automática de JSON: Axios faz a análise automática das respostas JSON, enquanto com fetch() é necessário chamar manualmente response.json();
• Timeouts: Axios permite definir timeouts para as requisições, funcionalidade não suportada nativamente pelo fetch();
• Interceptadores de requisição e resposta: Axios fornece interceptadores que permitem executar funções antes de uma requisição ser enviada ou após uma resposta ser recebida, útil para adicionar tokens de autenticação ou registrar logs de requisições;
• Sintaxe mais simples: Axios possui uma sintaxe mais simples e consistente para realizar requisições e manipular respostas;
• Suporte a navegadores antigos: Axios oferece suporte integrado a navegadores antigos que podem não suportar totalmente a API nativa fetch().

Uso básico do Axios

Axios fornece uma sintaxe simples para realizar requisições GET e POST. Ele retorna Promises, assim como o fetch(), mas lida automaticamente com algumas tarefas repetitivas, como a análise de JSON.

Requisição GET com Axios

Este exemplo demonstra o uso do Axios para uma requisição GET. A função getPostWithAxios chama axios.get() para buscar dados de um endpoint de API (/posts/1). O Axios simplifica o processo ao analisar automaticamente a resposta JSON, eliminando a necessidade de uma chamada separada para .json(). O bloco try...catch trata quaisquer erros, exibindo o título da postagem ou uma mensagem de erro no HTML.

Requisição POST com Axios

Este exemplo demonstra uma requisição POST utilizando Axios para enviar dados a uma API. A função sendPostWithAxios chama axios.post() com o endpoint da API (/posts) e os dados para um novo post, incluindo title, body e userId. O Axios envia automaticamente os dados como JSON, simplificando o processo. O bloco try...catch gerencia quaisquer erros, exibindo o título do post criado ou uma mensagem de erro no HTML.

Tratamento de Erros com Axios

Axios oferece um mecanismo fácil de usar para tratamento de erros. Se a requisição falhar (por exemplo, problema de rede ou erro do servidor), o Axios lança automaticamente um erro, que pode ser tratado utilizando try...catch.

Este exemplo demonstra o tratamento de erros com Axios. A função getInvalidPost tenta buscar dados de um endpoint inexistente usando axios.get(). Quando a requisição falha, o Axios lança automaticamente um erro. O bloco try...catch captura esse erro, exibindo a mensagem de erro no HTML.

Recursos Adicionais e Benefícios do Axios

Exploração de recursos adicionais do Axios.

Interceptadores de Requisição e Resposta

O Axios permite interceptar requisições e respostas para modificá-las antes do processamento. Útil para adicionar tokens de autenticação, registrar requisições ou gerenciar erros de forma global.

axios.interceptors.request.use(
  config => {
    // Modify request config (e.g., add authentication token)
    config.headers.Authorization = 'Bearer token';
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Suporte a Timeout

Axios permite definir timeouts para requisições, garantindo que a solicitação não fique pendente indefinidamente.

axios
  .get('https://jsonplaceholder.typicode.com/posts/1', { timeout: 5000 })
  .then(response => console.log(response.data))
  .catch(error => console.error('Request timed out', error));

Tratamento de Erros Simplificado

Axios lança erros automaticamente quando o status da resposta está fora da faixa 2xx, permitindo o tratamento de falhas de forma padronizada.

Suporte a Navegadores

Axios funciona em todos os navegadores modernos e fornece polyfills para navegadores mais antigos, tornando-se uma opção mais versátil para alguns projetos.