Como configurar o consumo da API REST Vue.js com Axios
Introdução
No Vue 2.0, os desenvolvedores decidiram que ter um módulo de cliente HTTP integrado era bastante redundante e poderia ser melhor atendido por bibliotecas de terceiros. A alternativa mais frequentemente recomendada é o Axios.
Axios é uma biblioteca cliente HTTP. Ele usa promises por padrão e é executado tanto no cliente quanto no servidor, o que o torna apropriado para buscar dados durante a renderização do lado do servidor. Como ele usa promises, você pode combiná-lo com async/await para obter uma API concisa e fácil de usar.
Neste artigo, você explorará a adição do Axios a um projeto Vue.js para tarefas que envolvem o preenchimento de dados e o push de dados. Você também aprenderá a criar uma instância base reutilizável.
Pré-requisitos
Para acompanhar este artigo, você precisará de:
- Node.js instalado localmente, o que você pode fazer seguindo Como instalar o Node.js e criar um ambiente de desenvolvimento local.
Instalando e importando axios
Para começar, você deve instalar o Axios.
Você pode instalar o Axios com npm:
- npm install axios --save
Ou com Fios:
- yarn add axios
Ao adicionar o Axios ao seu projeto Vue.js, você desejará importá-lo:
import axios from 'axios';
Em seguida, usaremos axios.get() para fazer uma solicitação GET.
Preenchendo dados com uma solicitação GET
Você pode usar o Axios diretamente em seus componentes para buscar dados de um método ou gancho de ciclo de vida:
<template>
<div>
<ul v-if="posts && posts.length">
<li v-for="post of posts">
<p><strong>{{post.title}}</strong></p>
<p>{{post.body}}</p>
</li>
</ul>
<ul v-if="errors && errors.length">
<li v-for="error of errors">
{{error.message}}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
posts: [],
errors: []
}
},
// Fetches posts when the component is created.
created() {
axios.get(`http://jsonplaceholder.typicode.com/posts`)
.then(response => {
// JSON responses are automatically parsed.
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
A versão async/await ficaria assim:
<!-- ... template code ... -->
<script>
import axios from 'axios';
export default {
data() {
return {
posts: [],
errors: []
}
},
// Fetches posts when the component is created.
async created() {
try {
const response = await axios.get(`http://jsonplaceholder.typicode.com/posts`)
this.posts = response.data
} catch (e) {
this.errors.push(e)
}
}
}
</script>
Este código irá recuperar posts de JSONPlaceholder e preencher uma lista não ordenada com posts. Quaisquer erros encontrados aparecerão em uma lista não ordenada separada.
Em seguida, usaremos axios.post() para fazer uma solicitação POST.
Empurrando dados com uma solicitação POST
Você pode usar o Axios para enviar solicitações POST, PUT, PATCH e DELETE.
Observação: você não desejará enviar solicitações em todos os eventos de entrada. Considere o uso de limitação ou debouncing.
<template>
<div>
<input type="text" v-model="postBody" @change="postPost()" />
<ul v-if="errors && errors.length">
<li v-for="error of errors">
{{error.message}}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
postBody: '',
errors: []
}
},
methods: {
// Pushes posts to the server when called.
postPost() {
axios.post(`http://jsonplaceholder.typicode.com/posts`, {
body: this.postBody
})
.then(response => {})
.catch(e => {
this.errors.push(e)
})
}
}
}
</script>
A versão async/await ficaria assim:
<!-- ... template code ... -->
<script>
import axios from 'axios';
export default {
data() {
return {
postBody: '',
errors: []
}
},
methods: {
// Pushes posts to the server when called.
async postPost() {
try {
await axios.post(`http://jsonplaceholder.typicode.com/posts`, {
body: this.postBody
})
} catch (e) {
this.errors.push(e)
}
}
}
}
</script>
Esse código cria um campo de entrada que enviará conteúdo para JSONPlaceholder. Quaisquer erros encontrados aparecerão em uma lista não ordenada.
Em seguida, usaremos axios.create() para criar uma instância base.
Criando uma Instância Base Comum
Um recurso freqüentemente negligenciado, mas muito útil que o Axios fornece, é a capacidade de criar uma instância base que permite compartilhar uma URL base comum e configuração em todas as chamadas para a instância. Isso é útil se todas as suas chamadas forem para um servidor específico ou precisarem compartilhar cabeçalhos, como um cabeçalho Authorization:
import axios from 'axios';
export const HTTP = axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`,
headers: {
Authorization: 'Bearer {token}'
}
})
Agora você pode usar HTTP em seu componente:
<template>
<div>
<ul v-if="posts && posts.length">
<li v-for="post of posts">
<p><strong>{{post.title}}</strong></p>
<p>{{post.body}}</p>
</li>
</ul>
<ul v-if="errors && errors.length">
<li v-for="error of errors">
{{error.message}}
</li>
</ul>
</div>
</template>
<script>
import { HTTP } from './http-common';
export default {
data() {
return {
posts: [],
errors: []
}
},
created() {
HTTP.get(`posts`)
.then(response => {
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
Este código usa a configuração estabelecida em http-common.js e se conecta ao JSONPlaceholder com o cabeçalho Authorization. Ele recupera as postagens e detecta quaisquer erros.
Conclusão
Neste artigo, você foi apresentado ao uso do Axios para preencher dados e enviar dados. E também como criar uma instância base reutilizável. Isso é apenas arranhar a superfície do que o Axios pode fazer.
Visite o repositório do GitHub para obter mais informações e documentação sobre o Axios.
Se você quiser aprender mais sobre Vue.js, confira nossa página de tópicos Vue.js para ver exercícios e projetos de programação.