Axios - um cliente HTTP Full Stack

Front-end 17 de Set de 2020

👋 Introdução

Axios é um cliente HTTP baseado em Promises para fazer requisições. Pode ser utilizado tanto no navegador quando no Node.js.

É um projeto open source, disponível no Github, tem 77 mil stars e 7 mil forks! Muito utilizado e está sendo bem mantido pela comunidade.

👌 Características

Por baixo dos panos faz requisições Ajax no browser via XMLHttpRequests;
Faz requisições http no Node.js;
Suporta a API de Promises;
Intercepta requisições e respostas (request & response);
Cancela requisições;
Transforma os dados em JSON automaticamente;
No lado cliente suporta a proteção contra XRSF;
Transforma os dados da requisição e da resposta.

⌨️ Instalação

Usando NPM:

npm install axios

Usando YARN:

yarn add axios

⚙️ Criando uma configuração reutilizável

Com Axios podemos fazer algumas configurações básicas, criar uma baseURL para não precisarmos digitar em cada requisição o endereço do servidor, informando apenas a rota e seus parâmetros.

Geralmente criamos uma pasta services e um arquivo api.js.

Colocamos a configuração abaixo:

src/services/api.js:

import axios from "axios";

// Pode ser algum servidor executando localmente: 
// http://localhost:3000

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

export default api;

Esse arquivo pode ser reutilizado em projetos com monorepo, com isso o mesmo arquivo poderá será utilizado no Front End, Mobile e Desktop.

Ao invés de criarmos três arquivos em cada projeto, criamos apenas um e compartilhamos entre os projetos.

👨‍💻 Como utilizar o Axios

Para utilizar basta importar o arquivo api.js no arquivo que irá fazer as requisições:

qualquerArquivo.js:

import api from '../services/api'

// Buscando usuários do github
api.get("users/tgmarinho")
      .then((response) => 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
// Utilizando o método HTTP POST
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" });

Podemos fazer todos os tipos de requisições HTTP.

Agora ao invés de importar o axios em cada arquivo e usar axios.get("minhaRota") ou axios.post("outraRota"), importamos apenas o arquivo api.js e utilizamos a sintaxe: api.get("minhaRota"), api.delete("outraRota") .

Para ver o Axios funcionando na prática, dê uma olhada nesse projeto que busca usuários do Github:

🧗‍♀️ Avançando com Axios

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

Em requisições que precisam de acessar rotas autenticadas, podemos passar o token da requisição na propriedade Authorization dos headers:

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

Requisições Simultâneas:

É possível realizar execução de várias requisições simultâneas:

useEffect(() => {
    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

Podemos criar interceptadores de cada requisição e resposta:

import axios from "axios";

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

let countReq = 0;

// Add a request interceptor
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) {
    // Do something with request error
    return Promise.reject(error);
  }
);

export default api;

/**
Resposta:
Já tivemos 1 requisições do tipo GET 
Já tivemos 2 requisições do tipo GET 
Já tivemos 3 requisições do tipo GET
**/

Exemplo completo: https://codesandbox.io/s/trying-axios-8ezy1

Obtendo o status de progresso do envio de dados com Axios

👊 Conclusão

Axios tem se demonstrado bastante versátil, a sua API foi bem projetada. Podemos utilizar a mesma biblioteca em vários ambientes — Front End, Back End, Desktop, Mobile. Isto é, Full Stack, o que agrada bastante.

É uma lib bem leve e uma excelente alternativa à API Fetch do navegador e http do Node.js.