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:
É 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
**/
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.
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
⌨️ Instalação
Usando NPM:
Usando YARN:
⚙️ 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 arquivoapi.js
.Colocamos a configuração abaixo:
src/services/api.js:
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:
Podemos fazer todos os tipos de requisições HTTP.
Agora ao invés de importar o
axios
em cada arquivo e usaraxios.get(\"minhaRota\")
ouaxios.post(\"outraRota\")
, importamos apenas o arquivoapi.js
e utilizamos a sintaxe:api.get(\"minhaRota\")
,api.delete(\"outraRota\")
.🧗♀️ Avançando com Axios
Em requisições que precisam de acessar rotas autenticadas, podemos passar o token da requisição na propriedade Authorization dos headers:
É possível realizar execução de várias requisições simultâneas:
Interceptadores
Exemplo completo: https://codesandbox.io/s/trying-axios-8ezy1
👊 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
Alguns exemplos da utilização do Axios: