Ajax con axios en VUEjs

↑ Me gusta (0)

Ha llegado la hora de trabajar con la librería más recomendada por el equipo de VUE para el manejo de peticiones AJAX. Se trata de AXIOS, la cual por medio del ejemplo práctico del video verás su diferencia o similitud con VUE-RESOURCE, su forma de uso y su sintaxis. Primero que nada, debemos tener claras las ideas de lo que vamos a utilizar.

AXIOS: como ya se ha explicado en anteriores videos, no es más que un cliente HTTP muy utilizado en integración con vuejs para realizar e interceptar peticiones XMLHttpRequest, es decir peticiones Ajax para la posterior transformación y uso de los datos en formato JSON.

Implementación

Para el ejemplo, podríamos utilizar y vincular los archivos Javascript de Vuejs y Axios mediante CDN a nuestro HTML, usamos las siguientes líneas de código:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>

 

Conseguir datos de un API con Axios

Mediante el siguiente código podemos darnos cuenta que la sintaxis para la obtención de los datos varía mucho en relación a vue-resource, pero la lógica y el resultado es el mismo. Ejemplo

<script>
    var urlUsers = 'https://jsonplaceholder.typicode.com/users';
    new Vue({
        el: '#main',
            created: function() {
                this.getUsers();
	    },
            data: {
		lists: []
	    },
            methods: {
                getUsers: function() {
                    axios.get(urlUsers).then(response => {
                        this.lists = response.data
                    });
                }
            }
    });
</script>

La url https://jsonplaceholder.typicode.com/users utilizada en la variable urlUsers de este ejemplo, es el enlace que se encarga de proveer los datos de usuarios desde un API en el formato correcto.

API: En términos simples un api es una pequeña extensión de un sistema desarrollado en una plataforma como Laravel, esta extensión es consumida por una aplicación en vue para acceder a ciertas funcionalidades de ese sistema, como podrían ser el login, o acceder a parte de la información o pequeñas tareas específicas.

Espero haberte podido ayudar a comprender un poco de las grandes ventajas que nos brinda la integración de Axios en Vue para el manejo de peticiones Ajax y a su vez. Haberte aclarado tus dudas en cuanto al uso de las Apis para el desarrollo web.

¿Que te parece? déjanos tu opinión.

1

Bienvenidos al curso de VUE 2

En este video damos la bienvenida a este gran curso, este es un tema muy solicitado y sinceramente queremos hacerlo mejor que cualquiera, de...

2

Renderización de listas VUEjs

En este video enseño a trabajar las listas en #VUE. Listamos elementos, agregamos de forma dinámica, y damos las bases necesarias para abord...

3

Vinculación de datos con Vue.js - Data Binding con V-BIND

Comencemos con una revisión de VUE, aprende en este video sobre la vinculación de datos, y esto es lo más maravilloso, es automático, es...

4

VUEjs y AJAX, manejo de respuesta JSON con VUE-RESOURCE

Vue Resource: El complemento para Vue.js que proporciona servicios para realizar peticiones web y manejar respuestas usando un XMLHttpRe...

5

Vue-resources y Axios para VUEjs

En VUE.js podemos trabajar sin problemas con AJAX, hablamos de vue-resource y de axios como te enseño en este video. Si comenzaste a...

6

Ajax con axios en VUEjs

Ha llegado la hora de trabajar con la librería más recomendada por el equipo de VUE para el manejo de peticiones AJAX. Se trata de AXIOS...

7

Introducción LARAVEL y VUE - uso de AJAX

En este video vamos hacer una pequeña introducción de la conexión de VUEjs y Laravel con el principal objetivo de mostrarte mediante...

8

Directivas, V-SHOW

En este video vamos mostrarte un poco sobre las directivas de renderizado condicional de VUE, es decir aquellas directivas que son capaces d...

9

V-IF V-ELSE y TEMPLATE

En esta oportunidad vamos hablar de las directivas entre v-if, v-else y de cómo utilizar el elemento template en VUE por medio d...

10

Eventos en VUE

En este video vamos a trabajar específicamente en los eventos de VUE, los cuales podrían ser básicamente un clic, presionar una tecla, cualq...

11

Filtros en VUE.js usando Computed Properties

En este video vamos a utilizar varias directivas explicadas en videos anteriores como v-model, v-if y v-on, además de los métodos y las prop...

12

Componentes en VUEjs

Vamos aprender a cómo crear componentes en VUE. Con componentes nos referimos a esos bloques de html que son estándar y que se usan varias v...

13

Así despedimos el curso #VUEjs

El objetivo de este video es para despedirnos de esta serie, indicando en un breve resumen todo lo que hemos aprendido a lo largo del curso,...