Vue JS - Usando Axios para consumir API em Laravel

Vue JS é um framework que se destaca por sua simplicidade e facilidade de aprendizagem. Contudo, também é um framework muito poderoso e robusto. E quando falamos de aplicações Web, uma tendência que cresce cada vez mais é a conexão de nossos frameworks com uma API. Talvez você já tenha se perguntado: “Como realizar essa conexão com o Vue JS?” É sobre isso que iremos falar neste artigo!

Nós iremos nos basear no projeto que desenvolvemos no artigo Vue JS - Introdução e criando primeiro projeto

Além disso, usaremos a API que desenvolvemos no artigo Criando API PHP com Laravel e PostgreSQL.

Isso será interessante pois iremos ver na prática como ocorre a conexão de dois sistemas diferentes, com duas linguagens diferentes, através da API.

Para começar, vamos iniciar o servidor de nossa API em Laravel usando o comando php artisan serve. Esse comando nos retornará a seguinte resposta:

Vamos agora acessar o nosso arquivo HTML que está usando o Vue e realizar as adaptações necessárias.

Listando usuários

A primeira adaptação que precisamos realizar é no layout. A nossa API possui o campo de email em sua estrutura, mas nosso HTML não. Vamos adicionar mais uma tag <input> para exibir também o email de cada usuário cadastrado:

<input type="text" v-bind:value="user.email" v-on:change="setUser($event.target.value, user.id)">

Excelente! Agora podemos iniciar a implementação das chamadas da API em nosso código. Para isso, iremos usar uma biblioteca JavaScript chamada Axios. Essa biblioteca está cada vez mais conhecida, devido à facilidade de sua configuração e implementação. Além disso, ela realiza as requisições baseando-se em promises, o que nos ajuda a ter um código realmente assíncrono.

A implementação do axios em nosso projeto é bem simples, igual à implementação do Vue. Basta adicionar uma tag <script> com uma CDN para seu arquivo JS:

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

Nosso objetivo é listar os usuários cadastrados em nossa página assim que ela carregar. Logo, precisamos fazer a requisição para nossa API antes da renderização de nosso projeto. Para isso, vamos colocar em prática um conceito muito interessante do Vue chamado “Lifecycle Hooks”, também conhecido como “Gatilhos do Ciclo de Vida da Instância Vue”.

Envolve uma série de métodos que podem ser executados ao longo do processo de montagem da instância Vue, antes e depois de sua renderização. Nós ensinamos cada um dos lifecycle hooks em nosso Curso Completo de Vue JS.

Neste projeto iremos usar o método created().

Iremos adicionar o seguinte código à instância Vue:

async created() {

	let results = await axios.get('http://localhost:8000/api/users');

	this.users = results.data;

}

Explicando: nós realizamos a requisição da URL de nossa API por meio do axios. Depois selecionamos os dados retornados por ela (todos os usuários) e os definimos como os valores da propriedade users da instância Vue.

Como usamos o await para esperar o retorno da promise do axios, foi necessário criar o método created() como async. Isso irá se repetir em todos os métodos que chamarem alguma rota da API. Nós falamos mais sobre o conceito de async/await no artigo JavaScript Assíncrono: O Guia Completo - Parte 5 - Entendendo Async/Await.

Ao atualizar a página, vemos o seguinte resultado:

Excelente, o usuário cadastrado em nosso Banco de Dados foi renderizado corretamente, por meio de nossa API!

Criando um novo usuário

O próximo procedimento é a criação de um usuário. Nosso formulário de cadastro possui apenas um campo, que é para o nome do usuário. Precisamos realizar uma pequena mudança, adicionando também o campo para o email dele:

<div class="field">
	<label for="email-input">Email</label>
	<input type="email" name="email" id="email-input" placeholder="Digite o email do usuário" v-model="newUser">
</div>

Além disso, na instância Vue nós criamos uma propriedade que armazena o nome do novo usuário. Contudo, nós estamos agora cadastrando o nome e o email dele. Poderíamos criar uma nova propriedade chamada “newEmail” para armazenar essa informação. Entretanto, isso com o tempo poderia se tornar insustentável.

Para resolver essa questão, vamos substituir a propriedade newUser por uma chamada formData, que possuirá um objeto vazio de início:

formData: {}

Agora, as diretivas v-model em nossos campos de formulário irão conter o valor das propriedades “name” e “email” do objeto formData:

<input type="text" name="username" id="username-input" placeholder="Digite o nome do usuário" v-model="formData.name">
<input type="email" name="email" id="email-input" placeholder="Digite o email do usuário" v-model="formData.email">

Agora podemos ter quantos campos desejarmos ?.

Além disso, vamos definir que o objeto formData será enviado para o Vue quando ocorrer o submit do formulário:

<form v-on:submit.prevent="addUser(formData)">

Vamos realizar agora a chamada de nossa API. Neste momento podemos nos deparar com mais uma refatoração no projeto. A URL “http://localhost:8000/api” irá se repetir em todas as requisições, pois ela é a base de nossa API. Logo, não faz sentido ficar repetindo esse trecho em todos os nossos métodos. Podemos armazenar essa informação em uma constante para que o código fique um pouco mais limpo:

const server = "http://localhost:8000/api";

Assim, a requisição GET que já criamos ficará da seguinte forma:

let results = await axios.get(`${server}/users`);

O método que iremos realizar a adaptação para a API é o método addUser(). Ele ficará da seguinte maneira:

async addUser(data) {

	if (!data.name) {
		alert('Informe o nome');
	} else if (!data.email) {
		alert('Informe o email');
	} else {

		let results = await axios.post(`${server}/users`, data);

		this.users.push({
			id: results.data.id,
			name: results.data.name,
			email: results.data.email
		});

	}

}

Explicando: nós realizamos algumas verificações em nosso código, para ter certeza de que o usuário não enviou nenhuma informação inválida para a API. Em seguida definimos a requisição da API, agora usando o método POST e informando para ela os valores submetidos pelo formulário. Por fim, nós adicionamos os valores retornados pela API em nossa instância Vue, com o objetivo de atualizar os dados no layout naquele momento.

Agora, quando testamos o envio de um novo usuário, vemos o seguinte na lista de usuários:

Agora nosso usuário foi criado através da API e já foi adicionado à página. O melhor é que se atualizarmos a página, veremos que o usuário continua lá!

Editando um usuário

Para editar um usuário, estamos usando o método setUser(). Estávamos informando anteriormente o valor de um novo nome apenas. Contudo, agora precisamos informar mais do que apenas um dado. Vamos adaptar o HTML para que informemos o inteiro objeto user para o método:

<input type="text" v-model="user.name" v-on:change="setUser(user)">
<input type="text" v-model="user.email" v-on:change="setUser(user)">

Note também que mudamos a diretiva v-bind para v-model, para que possamos mudar o valor da propriedade user ao digitarmos o novo valor.

Vamos agora adaptar o método setUser() para que ele faça a chamada da API em Laravel, informando o método PATCH para ela. Nosso método ficará assim:

async setUser(data) {

	if (!data.name) {
		alert('Informe o nome');
	} else if (!data.email) {
		alert('Informe o email');
	} else {

		await axios.patch(`${server}/users/${data.id}`, data);

	}

}

Perceba que adicionamos algumas verificações para ter certeza de que o nome e email foram informados para o método e fizemos a chamada da API, bem similar ao método addUser(). Isso já é o bastante. Ao alterarmos o valor de qualquer campo, ele será salvo também por meio da API.

Deletando um usuário

Por fim, chegamos ao método de exclusão. O evento de clique no botão de excluir continuará o mesmo, apenas o método removeUser() mudará. Ele ficará da seguinte forma:

async removeUser(id) {

	await axios.delete(`${server}/users/${id}`);

	this.users = this.users.filter(user => {
		return (user.id != id);
	})
	
}

Explicando: adicionamos a chamada de nossa API usando o método DELETE. Além disso, mantivemos o método filter() na propriedade users, para que o usuário excluído seja removido de nossa página. Agora, se clicarmos no botão “Excluir” em qualquer linha, o usuário será removido, não apenas da página, mas também do Banco de Dados!

Você pode encontrar os códigos desenvolvidos neste artigo em nosso GitHub.

Neste artigo aprendemos a conectar uma aplicação em Vue JS a uma API e manipular a chamada de suas rotas. Esse conhecimento pode ser um diferencial quando trabalhamos com o desenvolvimento de aplicações Web.

Se desejar, você pode enviar sugestões de temas clicando aqui. Até o próximo artigo :)