Header Ads Widget

Ticker

6/recent/ticker-posts

Solicitudes AJAX en Vue.js: Axios vs vue-resource vs fetch

 El consumo de datos de servidores API remotos a través de llamadas API, solicitudes HTTP o solicitudes Ajax es algo con lo que a menudo debe lidiar cuando está construyendo aplicaciones web modernas basadas en Rest API que se pueden conectar a front-end construidos usando bibliotecas como Vue. .js.

Vue.js es una biblioteca de JavaScript progresiva para crear interfaces de usuario o la capa de vista en la arquitectura MVC, por lo que no hace ninguna suposición sobre la tecnología del servidor o cómo conectarse con un servidor API tranquilo.

Vue.js no incluye una forma de hacer HTTP de forma inmediata, por lo que veremos cómo enviar solicitudes HTTP dentro de una aplicación web Vue.js, utilizando muchas técnicas y bibliotecas como el popular cliente http axios , el complemento vue-resource retirado o la API de recuperación incorporada del navegador .

Si anteriormente ha realizado un trabajo serio con jQuery, probablemente haya usado el $.ajax()método (que envuelve el objeto XMLHttpRequest que es un poco complejo de usar) para hacer solicitudes Ajax.

Hacer llamadas API a algún servidor desde su aplicación Vue.js es muy fácil. De hecho, tiene una gran cantidad de opciones. En este tutorial veremos algunas de las formas más utilizadas entre la comunidad de Vue.js con algunos ejemplos.

Frameworks como Angular 2+ tiene soporte incorporado para HTTP a través del módulo HTTP, Angular 4+ tiene una implementación aún mejor del cliente HTTP. Antes de la versión 2.0, Vue.js tenía vue-resource un complemento incorporado para realizar llamadas HTTP (Get, Post, Put y Delete), en Vue 2.0 está retirado pero el módulo aún está desarrollado y utilizado por la comunidad, simplemente no lo es. integrado en Vue más.

En primer lugar, creemos un nuevo proyecto de Vue.js.

Puede usar diferentes formas de crear un proyecto de Vue.js según sus preferencias y necesidades:

  • use una CDN para incluir Vue.js con una <script>etiqueta
  • descargar la biblioteca de Vue e incluirla usando una <script>etiqueta
  • instalar Vue.js a través de NPM
  • instalar Vue.js a través de Bower
  • use Vue-cli para crear un proyecto.

Vamos a utilizar la CLI de Vue para crear un nuevo proyecto e instalar las dependencias necesarias.

Así que dirígete a tu terminal o símbolo del sistema y luego ingresa los siguientes comandos:

vue init webpack http-demo
cd http-demo
npm install

Esto le dice a la CLI que inicialice un proyecto basado en Webpack. A continuación, navegamos dentro de la carpeta raíz del proyecto generado y ejecutamos npm installpara instalar todas las dependencias.

A continuación, trabajaremos en el componente Hello en src / components / Hello.vue

Usando Axios con Vue.js

Axios es una biblioteca de JavaScript muy popular para realizar solicitudes HTTP. Es un cliente HTTP que hace uso de la API Promises moderna de forma predeterminada (en lugar de las feas devoluciones de llamada de JavaScript) y se ejecuta tanto en el cliente como en el servidor (es decir, Node.js). Se puede usar en Vue con bastante facilidad.

Así que regrese a su terminal / símbolo del sistema e ingrese lo siguiente para instalar axios a través de npm:

npm install axios --save

Una vez que haya terminado. Puede importar axios a su componente Vue y luego llamar a los métodos disponibles como .get () ` para realizar solicitudes GET, .post () para enviar solicitudes POST, etc.

Veamos un ejemplo simple que llama axios.get () desde el evento de ciclo de vida creado del componente, así que comience importando la biblioteca

import axios from 'axios';

Luego agregue una matriz para contener sus artículos

export default {
  data() {
    return {
      todos: []
    }
  },

Cuando se crea el componente, envíe la solicitud GET.

Usaremos JSONPlaceholder, una API REST en línea falsa para probar y crear prototipos con tecnología JSON Server y una base de datos lowdb. Le proporciona datos falsos con fines de prueba.

  created() {
    axios.get('http://jsonplaceholder.typicode.com/todos')
    .then(response => {
         this.todos = response.data
    })
    .catch(error => {
      console.log(error);
    })

Si la solicitud se devuelve correctamente, asignamos los datos de respuesta a nuestra matriz de todos (no es necesario analizar explícitamente JSON) que declaramos anteriormente. Si hay un error, simplemente registramos el error en la consola.

Luego puede usar una directiva v-for para recorrer la matriz e imprimir los todos en una plantilla Vue.js

<template>
  <ul v-if="todos && todos.length">
    <li v-for="todo of todos">
      <h2></h2>
    </li>
  </ul>
</template>  

Usando vue-resource con Vue.js

vue-resource es una biblioteca para Vue.js que proporciona una API para enviar solicitudes Ajax envolviendo lainterfaz XMLHttpRequest de JavaScripto usando JSONP .

vue-resource tiene muchas características como:

  • el soporte de la API Promise y las plantillas URI
  • el apoyo de los interceptores de solicitudes y respuestas
  • el soporte de navegadores modernos como Firefox, Chrome y Safari, etc.
  • el soporte de Vue.js versión 1.0 y Vue.js versión Vue 2.0

vue-resource fue una vez parte de la biblioteca Vue.js, pero se retiró en Vue 2.0. El proyecto todavía es mantenido y utilizado por la comunidad.

Puede agregarlo a su proyecto de diferentes maneras. Vamos a instalarlo a través de npm:

Regrese a su terminal o símbolo del sistema y luego ingrese el siguiente comando para instalar la biblioteca en su proyecto actual.

npm install vue-resource --save

La biblioteca necesita un poco de configuración antes de que pueda usarla, así que adelante, abra el main.jsarchivo del proyecto y agregue lo siguiente:

Primero importe la biblioteca usando:

import VueResource from 'vue-resource';

Luego llame al método global Vue.use () para usar el complemento

/* ... */

Vue.use(VueResource);

/* ... */
new Vue({
    el: '#app',
    render: h => h(App)
})

Así que simplemente importamos el complemento e instruimos a Vue para que lo usara. Ahora podremos usar el servicio $ http en nuestros componentes de Vue.js.

Actualice el código JavaScript de su componente para realizar una llamada GET utilizando el método $ http.get () dentro del evento de ciclo de vida montado () que se llama cuando se monta el componente.

mounted() {
                           this.$http.get("http://jsonplaceholder.typicode.com/todos").then(response => {
                this.todos = response.body;
            }, error => {
                console.error(error);
            });
}

La plantilla es la misma que antes.

También puede enviar una solicitud POST con este. $ Http.post () .

Usando la API de recuperación del navegador con Vue.js

Durante un período de tiempo, la API subyacente para las llamadas AJAX en el navegador fue XMLHttpRequest . Aunque esta interfaz no se hizo originalmente para eso, realmente hizo el trabajo. Muchas bibliotecas que ha estado usando están construidas sobre XMLHttpRequest (por ejemplo, el famoso $ .ajax () en jQuery, etc.).

Los navegadores modernos tienen una mejor API diseñada específicamente para realizar solicitudes AJAX o llamadas HTTP. Es la API de recuperación.

Aquí está la descripción de la API de recuperación de la documentación de MDN

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes de la canalización HTTP, como solicitudes y respuestas. También proporciona un método global fetch () que proporciona una forma sencilla y lógica de recuperar recursos de forma asincrónica a través de la red.

Puede utilizar esta nueva API a través de un método fetch () , disponible en el objeto de ventana global El primer y único argumento obligatorio es el URI / URL del punto final de recurso / API que se va a buscar. Tomemos un ejemplo sencillo.

En su componente de Vue anterior. Agregue el siguiente código en el evento de ciclo de vida montado () para enviar una solicitud Ajax cuando se monte el componente.

fetch("http://jsonplaceholder.typicode.com/todos").then(function (response) {
            return response.json();
    }).then(function (result) {
        this.todos =  result;   
    }); 

La API de búsqueda moderna es mucho más limpia y fácil de usar que XMLHttpRequest . Eso es porque fue creado para que podamos hacer AJAX simplemente sin depender de bibliotecas externas que solo envuelven la compleja interfaz XHR y agregan soporte para promesas y otras características.

También puede realizar llamadas POST, PUT y DELETE proporcionando un parámetro de opciones :

fetch('https://jsonplaceholder.typicode.com/todos', {
        method: 'POST',
        body:JSON.stringify({title:"a new todo"})
}).then((res) => res.json())
.then((data) =>  console.log(data))
.catch((err)=>console.error(err))

Este es un ejemplo simple de usar fetch. Para obtener más información y una mirada en profundidad a la API, puede ver Introducción a Fetch .

Conclusión

Hemos visto cómo utilizar diferentes técnicas para enviar solicitudes Ajax en Vue.js. para comunicarse con los servidores de la API Rest o buscar recursos.

Puede usar una gran cantidad de opciones para hacer llamadas Ajax como Axios, vue-resource o mejor aún, la API de recuperación integrada del navegador en los navegadores modernos. También puede usar jQuery a través de la API $ .ajax () , que simplemente envuelve el objeto XHR en una llamada de método fácil de usar, pero no se recomienda incluir toda la biblioteca jQuery por el simple hecho de usar un método.

Publicar un comentario

0 Comentarios