Axios - um cliente HTTP Full Stack

[marcusdavanco]

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

  🧗♀️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/

[marcusdavanco]

Post original de https://blog.rocketseat.com.br/axios-um-cliente-http-full-stack