Entenda como utilizar a biblioteca Axios no JavaScript para realizar requisições HTTP corretamente!
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, vou te mostrar como usar a biblioteca Axios para fazer requisições HTTP no JavaScript.
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.
Vamos utilizar um projeto que já construímos anteriormente e, através da biblioteca Axios no JavaScript, vamos exibir as informações de forma adequada aos usuários.
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.
Então, faça o download do material disponível e vem comigo, que hoje vou te mostrar como fazer requisições HTTP no JavaScript com a biblioteca Axios.
No material disponível para download, você encontrará uma pasta com os arquivos do back-end e do front-end do nosso projeto.
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.
Nas aulas anteriores, utilizamos uma tabela da Fórmula 1 para exibir a classificação dos pilotos, onde todos os dados estavam inseridos dentro de um array no nosso arquivo JavaScript.
No entanto, na prática, o front-end realiza uma requisição HTTP ao back-end para obter os dados necessários e popular a tabela corretamente.
Em outras palavras, o back-end é a inteligência por trás do projeto, responsável por gerenciar os dados e, quando recebe a requisição HTTP, fornecer os dados de maneira adequada.
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).
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.
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/[email protected]/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.
Na aula de hoje, você aprendeu como utilizar a biblioteca Axios no JavaScript para fazer requisições HTTP a uma API, também criada com JavaScript.
Utilizando o projeto das aulas passadas, pudemos adaptar nosso código para obter as informações de uma API criada para o back-end, ao invés de extrair os dados de outro arquivo JavaScript local.
Agora, além de aprender a utilizar a biblioteca Axios, você também teve a oportunidade de revisar seus conhecimentos e aprofundar-se sobre requisições HTTP no JavaScript, APIs e as funcionalidades do back-end e front-end em um projeto.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador