Axios: Simplificando Requisições HTTP com Promises

Axios é um cliente HTTP baseado em Promises para fazer requisições, amplamente utilizado tanto no navegador quanto no Node.js. Com seu projeto open source disponível no Github, acumulou uma base de 77 mil estrelas e 7 mil forks, demonstrando sua popularidade e apoio contínuo da comunidade.

👌 Principais Características

Realiza requisições Ajax no navegador por meio de XMLHttpRequests.
Faz requisições HTTP no Node.js utilizando a API http.
Suporta a API de Promises para um código mais limpo e legível.
Permite interceptar requisições e respostas, possibilitando ações adicionais.
Oferece suporte para cancelamento de requisições.
Transforma automaticamente os dados em formato JSON.
Implementa proteção contra XRSF no lado do cliente.
Permite personalizar a transformação de dados em requisições e respostas.

⌨️ Instalação

Você pode instalar o Axios utilizando o NPM:

npm install axios

Ou utilizando o Yarn:

yarn add axios

⚙️ Criando uma configuração reutilizável

É possível criar uma configuração base com o Axios, estabelecendo uma baseURL para evitar repetir o endereço do servidor em cada requisição. Geralmente, essa configuração é definida no arquivo api.js dentro da pasta services do projeto:

import axios from "axios";

const api = axios.create({
  baseURL: "https://api.github.com",
});

export default api;

Essa configuração pode ser compartilhada em projetos com monorepo, permitindo o uso em diferentes plataformas, como Front-End, Mobile e Desktop, evitando a duplicação de código.

👨‍💻 Como utilizar o Axios

Para utilizar o Axios, basta importar o arquivo api.js e realizar as requisições desejadas. Veja um exemplo:

import api from '../services/api'

// Buscando usuários do Github
api.get("users/tgmarinho")
  .then((response) => {
    // Faça algo com os dados da resposta
    doSomething(response.data);
  })
  .catch((err) => {
    console.error("Ops! Ocorreu um erro: " + err);
  });

// Enviando um POST na rota "posts" com os parâmetros image, title e content
const response = await api.post("posts", { image, title, content });

// DELETE - Deletando um arquivo por ID
api.delete('files', { id });

// PUT - Atualizando apenas o nome
const personUpdated = await api.put(`person/${person.id}`, { name: "Thiago" });

O Axios permite realizar todos os tipos de requisições HTTP de forma simples e intuitiva.

🧗‍♀️ Avançando com Axios

Passando o token de autorização nas requisições:

api.defaults.headers.authorization = `Bearer ${token}`;

Requisições simultâneas:


Promise.all([
api.get("users/tgmarinho"),
api.get("users/diego3g"),
api.get("users/vinifraga")
]).

then((response) => { for (const res of response) { const { data: { login, bio } } = res;

setUsers((state) => [...state, { login, bio }]);

} });


- Interceptadores:
```javascript
import axios from "axios";

const api = axios.create({
  baseURL: "https://api.github.com",
});

let countReq = 0;

api.interceptors.request.use(
  function (config) {
    if (config.method === "get") {
      ++countReq;
    }
    console.log(`Já tivemos ${countReq} requisições do tipo ${config.method.toUpperCase()}`);
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

export default api;

🔗 Links

layla-ventilari / github-blog

Axios: Simplificando Requisições HTTP com Promises #3