Como Fazer Requisições GET com Axios: Um Guia para Iniciantes

Ao construir aplicações web, buscar dados de uma API é uma tarefa comum. Desenvolvedores JavaScript frequentemente começam com o método integrado fetch(), mas logo encontram problemas—como analisar manualmente respostas JSON e lidar com erros de forma complicada. O Axios simplifica a realização de requisições HTTP, especialmente requisições GET, oferecendo análise automática de JSON, melhor tratamento de erros e personalização mais fácil de requisições.

O que é Axios?

Axios é uma biblioteca JavaScript popular para fazer requisições HTTP em navegadores e Node.js. Diferentemente do fetch() integrado, o Axios analisa automaticamente respostas JSON, trata erros HTTP de forma consistente e suporta recursos convenientes de requisição como cancelamento e timeouts.

Instalando o Axios

Você pode instalar o Axios usando npm, Yarn, ou incluí-lo via CDN:

npm

npm install axios

Yarn

yarn add axios

CDN

<script src=""https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js""></script>

Importe o Axios em seu projeto:

import axios from 'axios';
// ou
const axios = require('axios');

Fazendo uma Requisição GET Básica

Veja como você pode facilmente fazer uma requisição GET básica:

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

O Axios lida com a busca e análise de respostas JSON automaticamente.

Manipulando Dados de Resposta

Com o Axios, você não precisa de etapas extras de análise. A resposta retornada contém uma propriedade data, já no formato de objeto JavaScript:

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(res => {
    console.log(res.data.title);  // Imprime o título da resposta
  });

Tratamento de Erros em Requisições GET do Axios

O Axios lida com erros de forma intuitiva, capturando problemas de HTTP e de rede. Veja como você pode gerenciar esses erros claramente:

axios.get('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      console.error('Erro HTTP:', error.response.status);
    } else if (error.request) {
      console.error('Sem resposta:', error.request);
    } else {
      console.error('Erro na configuração da requisição:', error.message);
    }
  });

Usando Parâmetros de Consulta em Requisições GET do Axios

Enviar parâmetros de consulta com Axios é fácil:

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: { userId: 1 }
})
.then(response => {
  console.log(response.data);
});

O Axios formata automaticamente esses parâmetros em uma string de consulta.

Usando Async/Await com Axios

A sintaxe Async/Await torna as requisições Axios mais legíveis:

async function fetchPosts() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.error('Erro:', error);
  }
}

fetchPosts();

Isso torna seu código mais simples e limpo.

Definindo Cabeçalhos em Requisições GET do Axios

Você pode definir cabeçalhos (como tokens de autenticação) facilmente:

axios.get('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_API_TOKEN'
  }
})
.then(response => {
  console.log(response.data);
});

Isso permite incluir cabeçalhos personalizados sem esforço.

Fazendo Múltiplas Requisições GET com Axios

Se você precisa de várias requisições ao mesmo tempo, o Axios simplifica isso:

const request1 = axios.get('https://jsonplaceholder.typicode.com/posts');
const request2 = axios.get('https://jsonplaceholder.typicode.com/users');

axios.all([request1, request2])
  .then(([posts, users]) => {
    console.log('Posts:', posts.data);
    console.log('Usuários:', users.data);
  })
  .catch(error => {
    console.error('Erro:', error);
  });

O tratamento de requisições simultâneas do Axios mantém seu código eficiente.

Conclusão

O Axios simplifica requisições HTTP GET em JavaScript, eliminando tarefas tediosas como análise de JSON e tratamento complicado de erros. Seja enviando requisições simples, usando parâmetros de consulta, cabeçalhos personalizados ou fazendo múltiplas requisições concorrentes, o Axios ajuda você a escrever código mais limpo e mais fácil de manter.

Perguntas Frequentes

Posso usar o Axios no Node.js?

Sim, o Axios funciona perfeitamente tanto em ambientes Node.js quanto em navegadores.

Qual é a principal diferença entre Axios e Fetch?

O Axios fornece análise automática de JSON, melhor tratamento de erros e recursos adicionais como cancelamento de requisição, enquanto o Fetch é minimalista e integrado aos navegadores.

O Axios pode lidar com métodos além de GET?

Sim, o Axios suporta POST, PUT, DELETE e todos os métodos HTTP padrão.