natasha-m-oliveira / github-blog Goto Github PK

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

** Post Original

Programming languages all have built-in data structures, but these often differ from one language to another. This article attempts to list the built-in data structures available in JavaScript and what properties they have. These can be used to build other data structures. Wherever possible, comparisons with other languages are drawn.

Dynamic typing
JavaScript is a loosely typed and dynamic language. Variables in JavaScript are not directly associated with any particular value type, and any variable can be assigned (and re-assigned) values of all types:

let foo = 42;   // foo is now a number
foo = ‘bar’;    // foo is now a string
foo = true;     // foo is now a boolean