Consumo de una API REST con Vue.js y JavaScript

En este artículo te voy a enseñar a consumir una API REST usando JavaScript y el framework Vue.js, además de utilizar Bootstrap para el diseño.

Al final vamos a tener una aplicación web que va a gestionar datos y hacer las 4 operaciones básicas: crear, actualizar, eliminar y obtener.

Todo esto lo vamos a hacer sin tocar el código del servidor, pues simplemente nos vamos a enfocar en la programación del lado del cliente, así que solo veremos HTML, JavaScript y un poco de CSS.

Sobre la API

Esta API REST va a implementar las operaciones fundamentales y los 4 verbos HTTP. Además, va a utilizar JSON para el intercambio de datos, así que al enviar datos los debemos enviar como JSON, y al recibirlos debemos decodificarlos.

La API que vamos a consumir es la que he creado anteriormente con Flask y Python, realmente esto no importa, pues eso es lo bueno de las APIS: que no importa el lenguaje de programación o la base de datos en las que estén implementadas.

Recuerda que esta API REST gestiona juegos o videojuegos, y expone las siguientes rutas:

  • GET /games – Obtener todos los juegos
  • GET /game/{id} – Obtener un juego por ID
  • POST /game – Agregar un juego
  • PUT /game – Actualizar un juego
  • DELETE /game/{id} – Eliminar un juego por ID

Verás que es realmente sencillo consumir la API con fetch, JavaScript y Vue.

La ruta base de esta API es https://apirestflaskpythonsqlite3.parzibyte.repl.co, si la montas en otro lugar o en tu localhost asegúrate de cambiar los datos. Por cierto, debido a que está en replit, me parece que la base de datos se va a estar eliminando periódicamente, pero para el ejemplo quedará perfecto.

Quiero aclarar algo. En este caso la API devuelve cada juego como un arreglo y no como un objeto, no afecta en nada, pero quiero que quede claro. Así que por ejemplo en lugar de acceder a juego.nombre, vamos a acceder a juego[1].

POST – Crear juego

Formulario para enviar datos a API REST usando Vue – Creación de juego

Comencemos viendo la operación POST para crear un nuevo juego usando esta API. Veamos el diseño HTML:

Lo importante aquí es el div que tiene el id app, ya que en ese elemento es en donde va a estar nuestra app de Vue. También fíjate en el formulario y sobre todo en los campos que tienen relacionado cada campo del objeto game (juego) con v-model.

Finalmente fíjate en el botón, cuyo clic va a invocar al método save. Ahora pasemos a ver el código JavaScript que básicamente recogerá los valores y los va a enviar a la API.

Comencemos viendo a data, tiene definido el objeto game (juego) con todas sus propiedades vacías. Este objeto es el que está ligado a los campos a través del v-model, y dentro de la app de Vue nos referimos al mismo usando this.game.

Ahora veamos al método save, en este caso se hace una pequeña validación en donde se comprueba cada campo y en caso de que esté vacío, se detiene la función y se muestra un Toast indicando que cierto campo no está lleno.

Luego en la línea 33 creamos el payload que será simplemente el juego codificado como JSON, mismo que enviamos en la línea 36 usando fetch. Es importante indicar el método que en este caso es POST, y el tipo de contenido que es application/json.

Dependiendo de lo que el servidor responda (true o false) mostramos un Toast indicando lo sucedido, y limpiamos el formulario simplemente reiniciando los valores del juego.

Obtener datos con GET – Listado de juegos

Obtener datos de API con petición HTTP GET usando Vue – Listado de juegos

Pasando al siguiente apartado, veamos cómo se hace una petición GET para obtener un arreglo de datos y dibujarlos en una tabla. Pero vamos paso por paso. Primero hacemos el diseño, para hacerlo simple solo pondré el código relevante:

La tabla está maquetada normalmente con una tabla HTML, pero ahora veamos el cuerpo de la misma. En este caso tenemos un tr que es un table row o fila de tabla que se va a repetir usando v-for por cada juego que exista.

Después tenemos varias td que son celdas de esa fila y que van a mostrar los datos de cada juego iterado. En este caso, como lo mencioné anteriormente, accedemos a game[0] o en la posición requerida, en lugar de acceder a la propiedad como si de un objeto se tratase.

También es interesante ver los botones que tenemos en la línea 19 y 24, pues respectivamente van a invocar a edit (pasando como argumento al juego) y a deleteGame.

Antes de pasar al código JavaScript quiero que veas el filtro de dinero (currency en este caso) en la línea 16.

Pasemos al código de JavaScript. Primero, con el filtro que simplemente le agrega dos decimales y el signo de pesos:

Ahora veamos toda la app de Vue. Comenzando con la data, que únicamente tiene la propiedad de juegos que al inicio es un arreglo vacío:

En el método mounted de la app estamos obteniendo los juegos, el método se ve así:

Hacemos una petición GET a la URL que devuelve los juegos y después asignamos el resultado a this.games, haciendo que Vue note ese cambio y dibuje los juegos en la tabla.

Aquí también tenemos al método de editar que simplemente hace una redirección a otra página que veremos más adelante:

HTTP DELETE – Eliminar juego

Método HTTP DELETE en API REST con Vue js – Eliminar juego

Ya que estamos viendo a la obtención de videojuegos en la tabla, veamos qué sucede cuando se hace clic en el botón de eliminar. Lo que se hace es mostrar una alerta de confirmación usando SweetAlert, y en caso de que el usuario confirme, se hace la petición.

Recuerda que la petición debe ser de tipo DELETE y debemos enviar el ID del juego en la URL:

Como en otros casos, mostramos un toast dependiendo de la respuesta. En caso de que todo vaya bien, refrescamos la lista de juegos (línea 25) para que se vea que el juego realmente se ha eliminado en tiempo real.

Petición HTTP PUT con Vue

Consumo de API REST con Vue – Método PUT para actualizar juego

Para terminar este tutorial veamos cómo hacer la operación UPDATE o mejor dicho cómo actualizar un valor en esta API REST.

Aquí vamos a hacer dos llamadas a la API. La primera será para obtener los detalles del juego (método GET) y la segunda será cuando se haga la actualización con PUT.

Veamos el diseño HTML que básicamente es como el formulario para agregar un nuevo juego:

La diferencia es que ahora los campos ya van a estar llenos cuando el usuario quiera enviarlos. Primero tenemos que obtener el valor de la URL:

En la línea 3 extraemos el id de la URL. Luego consultamos a la API para obtener un juego usando ese ID. Finalmente en la línea 6 modificamos la variable game asignando cada valor de lo que nos devolvió la API.

Finalmente cuando el usuario hace clic en guardar se desencadena lo siguiente:

La petición se está haciendo en la línea 23, enviamos el juego (que ya debe llevar el id) codificado como JSON e indicamos que el método será PUT. En caso de que todo vaya bien, hacemos una redirección al listado de todos los juegos.

Poniendo todo junto

A lo largo del post te he mostrado el código más relevante para consumir una API usando JavaScript y Vue. En este caso la API fue programada con Python, Flask y SQLite 3 pero al final eso no nos importó, ya que mientras las rutas hayan estado bien definidas nuestra app web funcionó perfectamente.

El código completo lo dejo en GitHub, y también te dejo una demostración.

Recuerda que replit elimina la base de datos periódicamente y no puedo hacer nada al respecto; podría montar la API en mi servidor web pero sería un consumo adicional que no es requerido pues puedes probar la API sin problemas aunque los datos se eliminen cada cierto tiempo.

Más adelante traeré más tutoriales de consumo de APIs usando otros lenguajes y frameworks. Mientras tanto te dejo con más contenido sobre JavaScript y Vue.

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

2 comentarios en “Consumo de una API REST con Vue.js y JavaScript”

  1. Te agradezco muchísimo este post. Están todos los elementos para aprender la interacción de todas estas tecnologías en una sola pasada. Es fantástico y anda al pelo!!. Buenísima contribución!! Mil gracias!!

Dejar un comentario