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, 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.

Inicia sesión para poder registrar las lecciones que has completado Login

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.

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Validación de registros duplicados en tabla intermedia

Hola,

Necesito de su ayuda estoy tratando que un request valide un registro para que no sea repetido, este esta compuesto por tres llaves foraneas(instituto_id, carrera_id, campus_id). les dejo el request: ```php return [ 'instituto_id' => 'required|numeric|min:1', 'carrera_id' => 'required|numeric|min:1', ...

El auth de laravel trabaja con $_SESSION?.

el auth de laravel trabaja basado en tokens o con el objeto session de php ...

Rutas de Laravel no funcionan

Buenas a todos, tengo un problema, ultimamente, cada vez que creo un nuevo proyecto de Laravel las rutas de este no funcionan. Por ejemplo: si creo el proyecto, éste se crea, pero al agregarle el sistema de autenticación: "auth" se generan tanto las rutas en el archivo web.php y las vistas. pero si intento acceder a la sección de registro o inicio de sesión me aparece el e...

form request ajax laravel (Mostrar error de validación de formulario con ajax)

Hola, tengo una consulta por hacer. Quisiera conocer sus opiniones, sobre como mostrar los errores de validación con ajax cuando utlizo la clase Form Request. Debo decir que el mensaje de registrado con éxito si lo muestra, sin embargo los mensajes de error no los he podido mostrar. Gracias

//FORM REQUEST


public function rules()
    {
        return [
     ...