Axios

Conectando Front e o Back com o Axios

Bruno Gabryell Cabral Da Silva

Jul 28, 2023 • 9 min read

Requisições HTTP são extremamente essenciais para o desenvolvimento web. Por meio delas, interligamos o frontend e o backend, blocos primordiais em projetos fullstack que muitas vezes são vistos como partes isoladas.

Enxergando a importância dessa conexão entre os dois, implementaremos juntos neste artigo um projeto que utiliza o React.js no frontend e o Node.js (que por sua vez se conecta com um banco de dados MySQL) no backend, retornando para o front informações e processamentos realizados no back por meio do Axios, um dos frameworks mais famosos do JavaScript que trabalha de forma eficaz fazendo conexões HTTP.

O que é o React.js?

O React é um biblioteca JavaScript de código aberto focado em criar interfaces para o usuário de maneira muito mais prática do que utilizando o JavaScript puro. Ele foi ganhando mais e mais espaço por ser de fácil assimilação, compreensão e adaptação.

O que é o Node.js?

O Node é um interpretador da linguagem JavaScript, criado a partir de um outro chamado V8. Com o passar dos anos, foi se tornando cada vez mais utilizado porque suporta o JavaScript tanto no lado cliente quanto do lado servidor, além de ser de fácil compreensão.

Porque o Axios?

Se você sair procurando por aí, vai perceber que existem várias bibliotecas focadas em solicitações HTTP como o Axios. Sendo assim, você pode em algum momento se perguntar o porquê de utilizá-lo ao invés de qualquer outro existente e nós te respondemos: além de ser possível utilizá-lo tanto no servidor quanto no cliente, o Axios possui uma ótima interação com dados JSON (muito utilizados neste tipo de implementação), sem contar que pouquíssimas linhas de código são necessárias para executar o que queremos.

Além disso, suas funções têm nomes de fácil compreensão: se você quiser utilizar um método POST, é só usar a função axios.post, ou axios.delete para o método DELETE e por aí vai. Muito provavelmente é por benefícios como estes que o Axios é um dos mais populares, senão o maior dentre eles.

Primeiros passos

Antes de mais nada, vamos criar o diretório para o projeto. Como boa prática de programação, é interessante criar mais dois diretórios dentro deste principal, um para o frontend e um para o backend. Mas vamos com calma, meus caros, começaremos primeiro pelo back.

Configurando o Backend

No diretório backend, vamos criar o arquivo package.json, instalar o MySQL2 (utilizado para a conexão entre o Node.js e o MySQL), o Express (para organização de requisições e respostas) e o Nodemon (para evitar a necessidade de reiniciar o servidor toda vez que fizermos alguma alteração nos arquivos do projeto). Para isto, basta executar os seguintes comandos em um terminal iniciado na pasta back do projeto:

npm init -y

npm install mysql2

npm install express

npm install nodemon

O arquivo principal do Node.js também deve ser criado. Faremos isto dentro de uma pasta src e o chamaremos de server.js. Também iremos inserir no arquivo package.json um script dev que utilizará o nodemon para executar o server.js que criamos:

Se tudo der certo, ao executar o comando npm run dev em um terminal executado dentro do diretório back, você terá o seguinte retorno:

Utilizaremos neste projeto um banco de dados cedido pelo próprio MySQL, chamado sakila. Você pode fazer o download do arquivo sql aqui, extraí-lo e importá-lo no seu MySQL. Neste banco de dados, utilizaremos a tabela actor e criaremos uma pasta chamada functions onde todas as requisições ao banco de dados serão feitas, prezando por uma melhor organização do nosso código.

Agora vamos criar a conexão com o banco de dados. Criaremos um diretório chamado connection dentro de back e utilizaremos a função createPool do MySQL2 para definir informações do MySQL que estamos usando:

Figura 4 - Configurando a conexão com o banco de dados.

Por fim, criaremos a rota actors que possuirá quatro métodos de ler (get), criar (post), deletar (delete) e atualizar o banco de dados (put). Dentro do diretório routes que deve ser criado em back, criaremos o arquivo actors.js com os devidos métodos de interação com o banco:

Figura 5 - Rota **actors** com métodos **get**, **put**, **post** e **delete** e suas respectivas funções.

Figura 6 - Implementando a rota **actors** no arquivo principal.

Figura 7 - Função **getAllActors** do método **get**.

Figura 8 - Função **registerActor** do método **post**.

Figura 9 - Função **updateActor** do método **put**.

Figura 10 - Função **deleteActor** do método delete.

💡

OBS: Lembre-se que todas estas implementações do item Configurando o Backend devem ser feitas dentro do diretório back que criamos.

É isto! Com tudo configurado e pronto aqui no backend, chegou a hora de irmos para o front.

Configurando o Frontend

A primeira coisa que faremos por aqui pelo front será criar um projeto React. Se tudo der certo, ao fim da execução destes comandos, será aberto no browser uma página com o símbolo do React em movimento:

npx create-react-app front

cd front

npm install

npm install axios

npm start

Uma vez criada a base do nosso frontend e instaladas as ferramentas cruciais, criaremos um componente Actors que será chamado em App. É nele que criaremos as quatro requisições que utilizamos no nosso back. A intenção é criar um componente que terá quatro botões, um para cada método (GET, POST, PUT e DELETE). Ao clicar no botão, o componente correspondente ao verbo é chamado.

Figura 11 - Importações do componente **Actors** e função **returnMethod**.

Figura 12 - Retorno do Componente **Actors**.

Agora que criamos as estruturas necessárias para o back e o frontend, é hora de finalmente utilizarmos o Axios para cada um dos métodos CRUD.

Requisições com o Axios

Método GET

Vamos implementar o componente GetAllActors, responsável por utilizar o Axios para fazer uma requisição do tipo GET ao nosso backend.

A primeira ação a ser feita é importar o Axios. Este por sua vez possui funções correspondentes para cada método que iremos utilizar (GET, POST, PUT e DELETE) e, no caso do GET, recebe um único argumento como parâmetro, que é o endpoint.

A função axios.get retorna um objeto com diversas informações, das quais nos utilizaremos a chave data, que possui a resposta enviada pelo Node.js. Visto que esperamos receber uma lista de atores, podemos usar o map para criar um elemento div para cada item.

Provavelmente, se você está seguindo este passo a passo à risca, surgiu um erro ao invés de retornar uma lista de itens quando você apertou o botão que implementa o componente GetAllActors, este aqui para ser mais exato:

O erro era esperado, não se preocupe. É muito importante aprender sobre o CORS, para que possamos saber manipular conscientemente quem queremos que faça requisições HTTP no nosso projeto e como.

O CORS (Cross-origin Resource Sharing) é um mecanismo utilizado pelos navegadores para compartilhar recursos entre diferentes origens. Ele funciona como uma medida protetora da API para que nem todas as URLs possam acessar nossa aplicação. Por meio do CORS é possível bloquear e escolher quais servidores podem consumir a API, assim como quais métodos podem ser utilizados. No diretório back, execute a seguinte ação no seu terminal:

npm install CORS

Agora, iremos importá-lo e implementá-lo no nosso arquivo server.js, declarando no arquivo principal que nosso servidor o utilizará:

Figura 15 - Implementação do CORS no **server.js**.

Da forma como fizemos na linha 8, estamos dizendo que qualquer servidor e qualquer método pode acessar nossa aplicação. Caso você queira restringir para um determinado método ou servidor, basta inserir um objeto como parâmetro da função CORS as chaves origin e method com as informações necessárias, como no exemplo abaixo:

Figura 16 - Utilizando o CORS para inserir restrições.

Como não temos restrições, utilizaremos o método CORS sem parâmetros. Agora, depois desta pequena alteração, nossa aplicação já deve funcionar:

Figura 17 - Componente **GetAllActors** em execução.

Método POST

Diferente da função get, o post recebe mais de um parâmetro e nem é tão estranho assim de entender, concorda? Diferente do verbo GET, no POST nós encaminhamos no corpo da requisição parâmetros que serão recebidos pelo outro lado. O segundo parâmetro é justamente um objeto com estas informações.

Dito isto, precisamos de dois inputs para que o usuário preencha as informações de first_name e last_name. Estes valores devem ser guardados em estados que enviaremos como requisição ao clicar em um botão Cadastrar. Vejamos:

Figura 18 - Implementações e função **register** do componente **RegisterActor**.

Figura 19 - Retorno do componente **RegisterActor**.

💡

OBS: Note que, além de utilizar o Axios para realizar uma requisição HTTP, a função register também verifica se existem informações válidas para os campos first_name e last_name, evitando assim o cadastro de um ator com um nome ou sobrenome vazios.

Figura 20 - Componente **RegisterActor** em execução.

Método PUT

Assim como no método post, o put também recebe dois parâmetros, sendo o segundo um objeto com os dados que serão enviados pelo corpo da requisição para o nosso backend. Vamos então construir um componente parecido com o RegisterActor, com a diferença de que enviaremos três parâmetros ao invés de dois, visto que é preciso do id do usuário para localizar o item que será alterado. Desta forma, criaremos três inputs e três estados, enviados também por um botão que nomearemos de Alterar ator.

Figura 21 - Implementação do componente **UpdateActor** e função **updateActor**.

Figura 22 - Retorno do componente **UpdateActor**.

Figura 23 - Componente **UpdateActor** em execução.

Método DELETE

Por fim, temos o método delete. Diferente dos outros, precisamos encaminhar o id do usuário a ser apagado via parâmetro no endpoint, pois é assim que a função deleteActor do backend recebe este dado. Além disso, criaremos um input do tipo number para que seja preenchido o id e um estado para armazená-lo. Por meio do botão Apagar enviaremos este dado para o backend.

Figura 24 - Implementação do componente **DeleteActor** e função **deleteItem**.

Figura 25 - Retorno do componente **DeleteActor**.

Figura 26 - Componente **DeleteActor** em execução.

Considerações finais

Chegamos ao fim desta jornada criando um projeto que conecta o frontend com o backend por meio do framework Axios. Deixa aqui nos comentários o que achou desta forma de conectar os dois lados de uma aplicação e se você conhece e utiliza algum outro modo. Bons estudos!

💡

As opiniões e comentários expressos neste artigo são de propriedade exclusiva de seu autor e não representam necessariamente o ponto de vista da Revelo.

A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.