Usando Axios para consumir APIs

É um projeto open source, disponível no Github que tem 89 mil stars e 8 mil forks. E com ele, a forma de fazer chamadas HTTPs no JavaScript ficaram muito mais rápidas e práticas.

• Por baixo dos panos faz requisições Ajax no browser via XMLHttpRequests;
• Faz requisições http com 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.

Usando NPM:

npm install axios

Usando YARN:

yarn add axios

O processo de configuração é bastante simples e prático, com o Axios é possível criar uma baseurl que é utilizada como a rota base do servidor, desse modo, para cada requisição apenas é necessário informar a rota e seus parâmetros.

Geralmente, criamos uma pasta "services" e um arquivo chamado "api.js" ou "api.ts" que é onde as configurações do Axios são deixadas.

• 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;

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

• ex:

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. E para fazer as requisições importamos apenas o arquivo api. e utilizamos a sintaxe: api.get("minhaRota"), api.delete("outraRota").

O Axios também permite que tokens de autenticação sejam passados em suas requisições. Em requisições para rotas que necessitam de autenticação, 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 }]);
      }
    });
  }, []);

O Axios também permite moddlewares sejam utilizados para fazer interceptações nas rotas.

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
**/

Axios tem se demonstrado bastante versátil, a sua API foi bem projetada e é bem mantida pelos desenvolvedores. Podemos utilizar a mesma biblioteca em vários ambientes — Front End, Back End, Desktop, Mobile. O que facilita o processo de desenvolvimento de aplicações FullStack com o JavaScript ou Typescript. Qualquer dúvida, dicas ou sugestões, não se esqueça de deixar nos comentário aqui em baixo.

Espero que tenha curtido 🤟