Biblioteca Axios no JavaScript – Como fazer Requisições HTTP

Entenda como utilizar a biblioteca Axios no JavaScript para realizar requisições HTTP corretamente e as principais diferenças com o método Fetch.

Introdução – Axios

Um dos passos mais importantes no desenvolvimento web é integrar o backend com o frontend.

Neste artigo, você vai aprender como consumir APIs usando Axios, uma das bibliotecas mais populares do JavaScript, e verá um comparativo direto com o Fetch, o método nativo do navegador.

Você vai perceber que a Axios é uma biblioteca muito simples de utilizar, porém extremamente útil, especialmente quando lidamos com a interação entre o front-end e o back-end.

Além disso, vamos aprender um pouco mais sobre back-end, front-end, HTTP, requisições e API. São termos muito comuns e importantes, então é essencial que você se familiarize com eles.

Se quiser simplificar suas requisições e deixar seu código mais limpo, faça o download do material disponível e vem comigo!

Para fazer o download do(s) arquivo(s) utilizados na aula, preencha com o seu e-mail:

Não vamos te encaminhar nenhum tipo de SPAM! A Hashtag Treinamentos é uma empresa preocupada com a proteção de seus dados e realiza o tratamento de acordo com a Lei Geral de Proteção de Dados (Lei n. 13.709/18). Qualquer dúvida, nos contate.

Como Funciona o Front-End e as Requisições HTTP

No desenvolvimento real de aplicações web, o front-end raramente trabalha com dados fixos dentro do código. Em vez disso, ele faz requisições HTTP para o back-end sempre que precisa buscar, atualizar ou enviar informações.

O back-end funciona como a “inteligência” da aplicação: é ele quem organiza, armazena e processa os dados. Quando o front-end envia uma requisição HTTP, o back-end responde entregando exatamente as informações necessárias para preencher tabelas, atualizar telas ou executar funcionalidades.

Assim, o front-end mostra aquilo que o usuário vê, e o back-end garante que tudo funcione por trás das cortinas — sempre se comunicando por meio de requisições HTTP.

O que é uma Requisição HTTP

O HTTP (HyperText Transfer Protocol) é um conjunto de regras que determina como ocorre a comunicação na internet, operando por meio de pedidos e respostas.

Quando você acessa um site, na verdade está enviando uma requisição HTTP e recebendo uma resposta do servidor contendo os arquivos necessários para visualizar o conteúdo da página.

Essa solicitação e resposta formam a base da comunicação HTTP, comumente denominadas em inglês como Request (Pedido) e Response (Resposta).

Primeiro Projeto de exemplo - Axios vs. Fetch

Quer acompanhar os testes na prática? Baixe o material de apoio que acompanha este conteúdo e siga as etapas abaixo.

Para rodar o projeto:

1. Baixe as pastas back-end e front-end;
2. Extraia os arquivos;
3. Coloque ambas no mesmo diretório;
4. Abra no seu editor preferido (VS Code, Cursor, etc.);
5. No terminal, acesse:

cd back-end
npm install

6. Depois:

cd ../front-end
npm install
npm run dev

Axios vs. Fetch: qual a diferença?

Para consumir APIs no JavaScript, normalmente usamos Fetch ou Axios. Ambos fazem o trabalho, mas há diferenças importantes.

A seguir, veja qual é o mais simples, mais rápido e qual oferece mais facilidades.

Instalação

A primeira grande diferença entre as duas ferramentas é a necessidade de instalação:

O Fetch é uma funcionalidade nativa do JavaScript Isso significa que você não precisa instalar absolutamente nada para usá-lo; ele funciona diretamente no seu navegador, inclusive no console.

Por outro lado, o Axios é uma biblioteca e precisa ser trazido para o projeto. Isso pode ser feito de duas maneiras:

• CDN (Content Delivery Network): Usando um script com link que puxa o código da internet;
• Instalação Local: Instalando-o como uma dependência do seu projeto. Se estiver usando um ambiente como Node, você pode instalar a biblioteca localmente (exemplo: npm install axios no terminal do seu frontend). Após a instalação, você deve importá-lo em seu código, como: import axios from 'axios'.

Verbosidade: quem usa menos código?

Um dos maiores argumentos a favor do Axios é que ele é menos verboso. Ele executa a mesma tarefa que o Fetch usando menos linhas e menos configurações manuais.

Com Fetch para fazer um requisição do tipo POST, o código seria:

const enviarNome = async () => {
    //Executa a ação se o campo nome não estiver vazio
    if (nome) {
      //Faz a requisição para o servidor
      const resposta = await fetch("http://localhost:3001/api/saudacao", {
        //Método HTTP POST para enviar dados para o servidor
        method: "POST",
        //Informa que os dados serão enviados em formato JSON
        headers: { "Content-Type": "application/json" },
        //Converte o objeto nome em uma string JSON
        body: JSON.stringify({ nome }),
      });
      //Converte a resposta em JSON
      const dados = await resposta.json();
        //Exibe os dados da resposta
        console.log(dados);
    }

Já com o Axios, teríamos:

const enviarNome = async () => {
    //Realiza a requisição se o nome for diferente de vazio
    if (nome) {
      //Usa o axios.post para fazer a requisição.
      //O primeiro argumento é a URL da API. Exemplo: "http://localhost:3001/api/saudacao"
      //O segundo argumento é o corpo da requisição. Exemplo: { nome }
        const { data } = await axios.post(
          "http://localhost:3001/api/saudacao",
          {
            nome,
          }
        );
        //Exibe os dados da requisição no console.
        console(data);
    }
  }

Tratamento de respostas

No quesito tratamento de respostas, o Axios acaba sendo mais poderoso porque possui mais funcionalidades "embutidas".

Como mostramos no exemplo do código acima, com o Axios a resposta já é um objeto e o JSON está pronto para ser utilizado.

Os dados enviados ficam armazenados dentro da chave data da resposta. Inclusive, é possível desestruturar a resposta para pegar apenas o dado de que precisa, tornando o código mais limpo (const { data } = await axios.post(...)).

Já no Fetch, o processo de receber e usar os dados acontece em duas etapas:

1. A pessoa recebe a resposta (const resposta = await fetch(...));
2. Depois é necessário transformar a resposta em JSON para usá-la posteriormente.

Tratamento de erros

O tratamento de erros também é muito mais simples e eficiente usando o Axios.

Com o Fetch, mesmo quando ocorre um erro na requisição (dependendo do tipo), ele pode não acionar o bloco catch de um try...catch. Você frequentemente precisa verificar manualmente se a resposta.ok  é verdadeira, com o uso de condicionais if/else.

if (!resposta.ok) {
  // tratar erro
}

Com o Axios, você pode confiar no bloco try...catch para capturar a maioria dos erros de forma limpa:

try {
  const response = await axios.post(...);
} catch (error) {
  console.error("Erro:", error);
}

Essa abordagem torna o tratamento de erros muito mais simples e eficiente.

Full Stack Impressionador

Essa é uma trilha de especialização que vai te tornar um verdadeiro Desenvolvedor Web Full Stack, dominando todas as principais tecnologias usadas tanto para o Front End quanto para o Backend e ainda para Mobile, construindo projetos práticos e exercícios aplicados à realidade das empresas. Tudo o que você precisa para se tornar um Desenvolvedor Full Stack em um único lugar.

Começar agora

Segundo Projeto - Consumindo Dados de uma API de Fórmula 1

Apresentação do Projeto - API de Fórmula 1

No material disponível para download, você também encontrará uma pasta compatada com os arquivos do back-end e do front-end do projeto de Fórmula 1.

Durante esta aula, utilizarei o VS Code com as extensões necessárias para editar e executar nossa aplicação. Portanto, se você ainda não tem o VS Code instalado, não deixe de conferir esta aula.

O front-end representa a parte visual da aplicação, ou seja, aquilo que o usuário irá visualizar e interagir. Para visualizarmos como é o front-end do nosso projeto, podemos clicar com o botão direito do mouse no arquivo index.html e selecionar Open with Live Server.

Com isso, será exibida a tabela de classificação dos pilotos da Fórmula 1 de 2023, que já vimos nas aulas anteriores.

Back-End – Criando a API com as Informações

Como iremos utilizar as requisições HTTP para obter as informações, faremos algumas modificações em nossos arquivos.

Começando pelo script.js, vamos remover a linha que importava os dados da tabelaPilotos.

Como não estaremos mais trabalhando com o arquivo tabelaFormula1.js, podemos até mesmo excluí-lo de nossos arquivos.

No entanto, sem esse arquivo, precisamos solicitar essas informações e dados, que antes vinham da tabelaPilotos de algum outro lugar. Para isso, utilizaremos nosso sistema back-end.

Dentro dos materiais da aula, você encontrará uma pasta chamada backend que conterá os arquivos necessários para executar uma API local. Essa API receberá a requisição do nosso front-end e enviará os dados solicitados como resposta.

Para executar essa API localmente, você precisa abrir essa pasta no VS Code e, dentro do terminal, executar o comando: npm run dev

Esse comando é essencial para executar o back-end e permitir que ele fique ativo para fornecer os dados necessários para nosso front-end.

Esta API estará rodando na porta 3000, então ficará acessível a partir do endereço localhost:3000/api/v1/drivers.

Ao acessarmos esse endereço, estaremos fazendo uma requisição a ela pelo navegador e, como resultado, obteremos os dados referentes aos pilotos da Fórmula 1 que tínhamos anteriormente dentro do nosso array no arquivo JS.

Front-End – Pegando as Informações da API – Biblioteca Axios

Para conectar nosso front-end à API back-end e obter as informações necessárias, vamos incorporar a biblioteca Axios em nosso código JavaScript.

O Axios simplifica o processo de fazer requisições HTTP, tornando-o mais fácil e intuitivo de implementar.

Para adicionar o Axios ao nosso projeto sem a necessidade de instalação manual, vamos aproveitar o método CDN (Content Delivery Network).

Isso envolve copiar a tag <script> disponível na página da biblioteca Axios e colá-la dentro do arquivo HTML (index.html) do nosso projeto.

Essa tag <script> deve ser inserida dentro da seção <head> do nosso arquivo, logo acima da outra tag <script> presente.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="./style.css" />
    <title>f1-2023-standings</title>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
    <script defer src="./script.js" type="module"></script>
  </head>

Com o Axios integrado ao nosso projeto, precisamos ajustar nosso código JavaScript para utilizar os recursos dessa biblioteca e fazer a requisição HTTP à nossa API.

Primeiro, vamos modificar a função popularTabelaComDadosLista() e remover a listaDeDadosPilotos dos parâmetros e da chamada dela.

function popularTabelaComDadosLista(idCorpoTabela) {
  const corpoTabela = document.getElementById(idCorpoTabela);
  listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
    const novaLinhaTabela = `<tr class='${
      numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
    }'>
        <td class="text-center py-4">${numeroElemento + 1}</td>
        <td class="text-center py-4">${dadosPiloto.name}</td>
        <td class="text-center py-4">${dadosPiloto.team}</td>
        <td class="text-center py-4">${dadosPiloto.points}</td>
      </tr>`;
    corpoTabela.innerHTML += novaLinhaTabela;
  });
}

popularTabelaComDadosLista('corpo-tabela');

Como obteremos os dados através de uma requisição HTTP, precisamos transformar nossa função em uma função assíncrona (async), visto que o tempo de solicitação e resposta exige um certo tempo.

Para obter os dados que irão popular nossa tabela de pilotos, utilizaremos o método get da biblioteca Axios, passando para ele o endereço da API.

Esse método fará uma requisição do tipo GET à URL da API e receberá como resposta um response object.

Esse objeto de resposta contém várias informações relacionadas à resposta da requisição feita, entre elas, os dados dos pilotos. Esses dados podem ser acessados através da propriedade .data.

Vamos armazenar os dados dessa requisição dentro da variável listaDeDadosPilotos. Como precisamos aguardar a requisição ser concluída antes de prosseguir com a função, vamos adicionar a palavra-chave await antes dela.

async function popularTabelaComDadosLista(idCorpoTabela) {
  const corpoTabela = document.getElementById(idCorpoTabela);
  const listaDeDadosPilotos = (
    await axios.get('http://localhost:3000/api/v1/drivers')
  ).data;
  listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
    const novaLinhaTabela = `<tr class='${
      numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
    }'>
        <td class="text-center py-4">${numeroElemento + 1}</td>
        <td class="text-center py-4">${dadosPiloto.name}</td>
        <td class="text-center py-4">${dadosPiloto.team}</td>
        <td class="text-center py-4">${dadosPiloto.points}</td>
      </tr>`;
    corpoTabela.innerHTML += novaLinhaTabela;
  });
}

popularTabelaComDadosLista('corpo-tabela');

Ao executarmos nosso código, teremos a tabela de classificação dos pilotos da Fórmula 1 de 2023 sendo exibida novamente.

No entanto, dessa vez, ao invés de estarmos solicitando as informações de um array dentro de outro arquivo JavaScript, estamos obtendo essas informações a partir de uma API utilizando a biblioteca Axios no JavaScript.

Conclusão – Biblioteca Axios no JavaScript – Requisições HTTP

Nesta aula, você viu como utilizar a biblioteca Axios para fazer requisições HTTP no JavaScript e entendeu, na prática, como consumir dados de uma API.

Também comparamos o Fetch com o Axios. Embora o Fetch seja nativo do navegador e funcione sem instalação, o Axios se destaca pela clareza e organização do código. Ele facilita tarefas do dia a dia, como:

• Ler respostas da API
• Converter JSON automaticamente
• Tratar erros de forma mais simples
• Reduzir verbosidade
• Aumentar produtividade

Se o seu objetivo é ganhar velocidade e praticidade na integração com APIs, o Axios é uma excelente escolha.

Além disso, esta aula reforçou conceitos fundamentais sobre requisições HTTP, APIs e o papel do front-end e do back-end em um projeto — conhecimentos indispensáveis para quem quer evoluir no desenvolvimento web.

Caso prefira esse conteúdo no formato de vídeo-aula, assista aos vídeos abaixo ou acesse o nosso canal do YouTube!

Hashtag Treinamentos

Para acessar publicações de Full Stack, clique aqui!

Posts mais recentes de Full Stack

• 
  LESS CSS: Guia Completo do Pré-processador (2026)8 de maio de 2026
  LESS CSS é um pré-processador que adiciona variáveis, mixins, nesting e operações matemáticas ao CSS. Aprenda a configurar e usar com projeto prático.
• 
  Variáveis no CSS (CSS Variables): Como Usar de Forma Profissional29 de dezembro de 2025
  Você sabe o que são Variáveis no CSS (CSS Variables)? Aprenda como usar técnicas que vão transformar a forma como você escreve variáveis CSS.
• 
  Try Catch no JavaScript: Programação Defensiva na Prática27 de novembro de 2025
  Aprenda a usar try catch no JavaScript e melhore a sua programação defensiva!

Posts mais recentes da Hashtag Treinamentos

• 
  Planilha de Controle de Notas Fiscais no Excel [Grátis]2 de outubro de 2026
  Baixe a planilha de controle de notas fiscais no Excel grátis: calcule ISS e retenções, veja o que está em aberto e gere a cobrança de cada nota de serviço.
• 
  Qual IA usar na empresa: ChatGPT, Claude ou Perplexity?2 de outubro de 2026
  Qual IA usar na empresa: veja as diferenças entre ChatGPT, Claude e Perplexity e quando cada um rende mais em cada área da sua equipe.
• 
  Apostilas Gratuitas em PDF: Excel, Power BI, Python e IA30 de setembro de 2026
  Baixe apostilas gratuitas em PDF de Excel, Power BI, Python, Claude e agentes de IA, com exercícios e gabarito. Escolha a sua e comece hoje.