Axios: Cliente HTTP para TypeScript

O que é Axios?

Axios é um cliente HTTP popular para navegador e Node.js, escrito em TypeScript. Ele fornece uma API moderna e conveniente para realizar requisições HTTP assíncronas. A biblioteca processa automaticamente dados JSON, suporta interceptadores (interceptors), proteção contra CSRF e cancelamento de requisições.

Para que serve o Axios?

Ao contrário do fetch nativo, o Axios oferece uma sintaxe mais intuitiva, transformação automática de dados e tratamento de erros integrado. Ele é ideal para criar clientes de API REST, trabalhar com autenticação e upload de arquivos. Graças ao suporte a TypeScript, você obtém tipagem estrita para todas as requisições e respostas.

Instalação

Para instalar o Axios no seu projeto, use npm ou yarn:

npm install axios# ouyarn add axios

Para trabalhar com TypeScript, instale os tipos (geralmente já estão incluídos):

npm install @types/axios

Funcionalidades principais

Suporte a todos os métodos HTTP: GET, POST, PUT, DELETE, PATCH e outros.
Serialização automática de JSON: os dados são transformados automaticamente.
Interceptadores (interceptors): é possível processar requisições e respostas globalmente (por exemplo, para adicionar tokens).
Cancelamento de requisições: usando CancelToken ou AbortController.
Upload de arquivos: suporte a progresso de upload via onUploadProgress.
Proteção contra CSRF: trabalho automático com cookies e cabeçalhos.
Tipagem: suporte completo a TypeScript com genéricos.

Exemplo de código em TypeScript

Requisição GET básica com tipagem de resposta:

import axios, { AxiosResponse } from 'axios';

interface User {  id: number;  name: string;  email: string;}

async function getUser(id: number): Promise<User> {  const response: AxiosResponse<User> = await axios.get(`/api/users/${id}`);  return response.data;}

// UsogetUser(1).then(user => console.log(user.name));

Exemplo de requisição POST com envio de dados:

import axios from 'axios';

interface CreateUserPayload {  name: string;  email: string;}

const newUser: CreateUserPayload = { name: 'John', email: 'john@example.com' };

axios.post('/api/users', newUser)  .then(response => console.log('User created:', response.data))  .catch(error => console.error('Error:', error));

Exemplo com interceptador para adicionar token:

import axios from 'axios';

axios.interceptors.request.use(config => {  const token = localStorage.getItem('token');  if (token) {    config.headers.Authorization = `Bearer ${token}`;  }  return config;});

Quando usar Axios

Axios é ideal para:

Criação de aplicações cliente em React, Vue, Angular ou Svelte.
Servidores Node.js onde é necessário um cliente HTTP conveniente.
Projetos onde a tipagem estrita do TypeScript é importante.
Situações onde são necessários interceptadores, cancelamento de requisições ou progresso de upload.

Se você usa fetch e deseja um código mais conciso com tratamento automático de erros — Axios será uma excelente escolha.