Cuando tenemos que hacer peticiones Ajax nos encontramos que el framework Vue por defecto no nos resuelve este problema.
En Vue distintas actividades como Ajax queda liberado al desarrollador a utilizar la que más le conviene. La comunidad de Vue ha desarrollado muchas librerías par resolver este tipo de problemas.
Veremos una de las más populares para hacer peticiones Ajax con Vue. El repositorio donde podemos descargar esta librería se encuentra aquí(vue-resource ).
Si no queremos descargarla para tenerla en forma local podemos utilizar su CDN:
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
Es importante tener en cuenta que cuando la importemos en nuestra página sea después de importar Vue:
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
Confeccionar una página que haga una petición a un sitio web que retorne un archivo JSON.
La petición la haremos al dominio:
https://jsonplaceholder.typicode.com/posts
retorna un archivo JSON con el siguiente formato:
[
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit
molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores
neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui
aperiam non debitis possimus qui neque nisi nulla"
}]
Nuestro objetivo luego de recuperado el archivo JSON es mostrar los títulos y cuerpo de todos los post del blog ficticio.
<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="aplicacion">
<button v-on:click="recuperarPost()">Recuperar Post</button>
<div v-for="nota in notas">
<h1>{{nota.title}}</h1>
{{nota.body}}
<hr>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
<script>
var app=new Vue({
el: '#aplicacion',
data:{
notas:[]
},
methods: {
recuperarPost: function () {
this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function (respuesta) {
this.notas=respuesta.body
})
}
}
})
</script>
</body>
</html>
Debemos importar tanto el core de Vue como la librería vue-resource@1.3.5, en ese orden:
<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>
La librería vue-resource tiene un objeto $http y mediante un método llamado get le pasamos como referencia la dirección del sitio que retorna el archivo JSON. Cuando el método recupera todos los datos llamamos al método then y le pasamos la función que procesará la petición JSON:
recuperarPost: function () {
this.$http.get('https://jsonplaceholder.typicode.com/posts').then(function (respuesta) {
this.notas=respuesta.body
})
En el atributo notas se almacena el objeto JSON recuperado. Tener en cuenta que cuando modificamos el atributo notas inmediatamente se actualiza la vista donde se muestra los datos recuperados:
<div v-for="nota in notas">
<h1>{{nota.title}}</h1>
{{nota.body}}
<hr>
</div>
La recuperación de datos se efectúa cuando el operador presiona un botón:
<button v-on:click="recuperarPost()">Recuperar Post</button>