Axios - um cliente HTTP Full Stack

[andreviapiana]

Axios é um cliente HTTP baseado em Promises para fazer requisições. Pode ser utilizado tanto no navegador quando no Node.js, e atualmente vem ganhando bastante espaço no mercado pela sua facilidade de uso.

 

É 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").

 

🧗‍♀️ 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.

 

🔗 Links

 

• https://github.com/axios/axios
• Projeto de teste

 

Alguns exemplos da utilização do Axios:

 

• https://blog.rocketseat.com.br/react-hook-swr-melhor-ux-no-consumo-de-api-no-front-end-react/
• https://blog.rocketseat.com.br/reactjs-autenticacao/
• https://blog.rocketseat.com.br/autenticacao-no-react-native-reactjs-com-context-api-hooks/
• https://blog.rocketseat.com.br/react-native-upload-imagem/
• https://howhttps.works/
• https://blog.rocketseat.com.br/obtendo-o-status-de-progresso-do-envio-de-dados-com-axios/

[andreviapiana]

Texto extraído diretamente do Blog da Rocketseat. https://blog.rocketseat.com.br/axios-um-cliente-http-full-stack/

[andreviapiana]

Comentário de Teste

[andreviapiana]

Comentário de Teste