Introdução

Axios é uma biblioteca JavaScript que permite fazer requisições HTTP de forma simples e rápida. Ela é amplamente utilizada em aplicações web para se comunicar com APIs e servidores. Nesta sessão, abordaremos como e porquê utilizar o Axios em seus projetos, desde a instalação até o tratamento de erros.

Por que utilizar o Axios?

O Axios nos oferece uma série de vantagens em relação a outras bibliotecas de requisições HTTP, como o Fetch API. Algumas dessas vantagens incluem:

• Suporte a promessas, o que facilita o tratamento assíncrono
• Interceptores de requisição e resposta, permitindo manipular dados antes de serem enviados ou recebidos
• Cancelamento de requisições, o que é útil em casos onde não precisamos mais de uma resposta
• Suporte a transformações de dados, permitindo modificar os dados antes de enviá-los ou após recebê-los
• Suporte a configuração global, o que facilita a reutilização de configurações em diferentes partes da aplicação

Essas características tornam o Axios uma escolha popular entre desenvolvedores que buscam uma maneira eficiente e flexível de lidar com requisições HTTP em suas aplicações. Hoje em dia, é uma das bibliotecas mais utilizadas para esse fim, tanto em projetos web quanto em aplicações móveis com React Native.

Instalação e configuração

Para instalar o Axios em seu projeto, é bem simples, basta executar o seguinte comando no terminal:

npm install axios

Após a instalação, você pode importar o Axios em seus arquivos JavaScript ou TypeScript da seguinte forma:

1import axios from 'axios'

O Axios não requer uma configuração complexa para começar a ser utilizado. No entanto, você pode configurar algumas opções globais, como o URL base para todas as requisições, cabeçalhos padrão e tempo limite. Para isso, você pode criar um arquivo de configuração, por exemplo, apiInstance.ts:

1

Com essa configuração, todas as requisições feitas com essa instância do Axios utilizarão o URL base definido, além de incluir o cabeçalho de autenticação com o token JWT, se necessário. Você pode criar várias instâncias do Axios com diferentes configurações, dependendo das necessidades do seu projeto.

O cabeçalho JWT pode inclusive ser alterado por meio da criação de uma função auxiliar:

1

Essa função pode ser chamada sempre que você precisar atualizar o token JWT, por exemplo, após o login do usuário ou quando o token for renovado.

Realizando requisições

Com o Axios configurado, você pode começar a fazer requisições HTTP de forma simples. O Axios suporta todos os métodos HTTP, como GET, POST, PUT, DELETE, entre outros. Aqui estão alguns exemplos de como fazer requisições com o Axios:

1

Para fazer uma requisição GET, você pode usar o método axios.get. Esse método aceita o URL da requisição como parâmetro e retorna uma promessa que resolve com a resposta do servidor. A url que você passar pode ser relativa ou absoluta, dependendo da configuração do seu Axios. A mesma lógica segue para qualquer outro tipo de request.

1

Tratamento de erros

O Axios facilita o tratamento de erros nas requisições. Quando uma requisição falha, o Axios rejeita a promessa com um objeto de erro que contém informações sobre o erro ocorrido. Você pode capturar esses erros usando o método .catch ou utilizando o bloco try/catch com async/await.

1

Além disso, você pode personalizar o tratamento de erros para lidar com diferentes tipos de erros, como erros de rede, erros de autenticação ou erros do servidor. O Axios também permite que você verifique se o erro é um erro do Axios usando o método axios.isAxiosError, o que pode ser útil para diferenciar erros de rede de erros de resposta do servidor.

Interceptors

Os interceptors do Axios permitem que você intercepte requisições ou respostas antes que sejam processadas. Isso é útil para adicionar cabeçalhos, manipular dados ou lidar com erros de forma centralizada.

Você pode adicionar interceptors de requisição e resposta usando os métodos axios.interceptors.request.use e axios.interceptors.response.use. Aqui está um exemplo de como usar interceptors:

1

Com os interceptors, você pode, por exemplo, adicionar um token de autenticação a todas as requisições ou lidar com erros de forma consistente em toda a aplicação, sem precisar repetir o código em cada requisição.