Como Leer un EndPoint de API REST que devuelve datos JSON con Vue JS 3 y Axios 0.21.1 – Parte 2 (Final)

Axios Vue JS | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

En la Parte anterior llamada Como Leer un EndPoint de API REST que devuelve datos JSON con Vue JS 3 y Axios 0.21.1 – Parte 1, hicimos una rápida instalación de Vue CLI, luego creamos un nuevo proyecto con Vue para este tutorial e instalamos Bootstrap 4 con sus respectivas dependencias para crear la vista HTML, específicamente una tabla HTML, en donde se cargarán los datos JSON, vamos con esta Segunda Parte.

Partes

  • Parte 1 
  • Parte 2 – Final (Código Fuente GitHub)

Antes de continuar, te invito a leer los siguientes artículos:

Asimismo, te invito a escuchar el Podcast: “Las Buenas Prácticas Un Hábito Importante en la Programación”:

Spotify: Sound Cloud: Apple Podcasts:

Bien ahora continuemos con el Post: Como Leer un EndPoint de API REST que devuelve datos JSON con Vue JS 3 y Axios 0.21.1 – Parte 2 (Final). 

Si quieres aprender sobre que es una API REST te recomiendo leer el articulo Que es API REST + Mejores Prácticas.

Instalación y Configuración de Axios

Para poder leer nuestra el EndPoint de API REST necesito instalar Axios, para este ejecuto el siguiente comando en mi consola de comandos.

Luego de ejecutar el comando hemos instalado Axios en nuestro proyecto con Vue JS, ahora vamos a configurar Axios para que pueda ser instanciado y usado en nuestros componentes, yo solo lo usaré en el componente Postres (Este componente lo creamos en la Parte 1 de este tutorial), pero quedará configurado para ser usado en cualquier otro componente del proyecto.

Para poder usar Axios de manera global en todo el proyecto, crearé un archivo de configuración llamado api.js en src > api.js, tu le puedes poner el nombre que desees, este archivo tendrá una configuración de Axios que usaré de manera global.

Abro el archivo api.js y dentro de el importaré axios y definiré la ruta local del servidor de Vue JS.

Entonces con esto ya podemos usar Axios en cualquier componente de nuestro proyecto.

Componente Postres

Abrimos el componente Postres que creamos en la Parte 1 de este tutorial, este componente se encuentra en src > components > Postres.vue 

Dentro del archivo Postres.vue borramos el contenido que tenga y comenzamos creando una tabla HTML con Bootstrap 4.

Paso seguido en las etiquetas <script></script> vamos a importar el archivo de configuración api.js que creamos anteriormente, luego definimos los campos de los datos que cargaremos en la tabla HTML, creamos un array con el nombre postres[] para almacenar los datos que recibimos del JSON, por último en el método mounted() colocamos la ruta del EndPoint de la API REST e imprimimos los datos en la consola del navegador para verificar si recibimos datos.

A continuación el código completo del componente Postres.

Bueno con esto ya tenemos creado nuestro componente Postres con el código necesario para mostrar los datos en una tabla HTML creada con clases de Bootstrap 4.

Por último un Detalles en nuestro archivo App.vue que se encuentra en src > App.vue

Dentro el archivo App.vue comentamos la imagen del logo de Vue para que nuestra vista HTML quede limpia solamente con la tabla y los datos.

Entonces si ejecuto el siguiente comando para correr el servidor de Vue JS. 

Si abro la dirección local http://localhost:8080/ en el navegador Google Chrome y presiono el botón F12 para cargar las Chrome DevTools, puedo ver en la consola que me arroja un error de CORS policy. 

Estuve investigando sobre el tema y encontré que debes dar permisos en tu servidor para poder leer los datos JSON de ese EndPoint, hay un proovedor de VPS llamado Digital Ocean que nos permite hacerlo haciendo un pago adicional, pero no he probado otros servidores para afirmar que también nos permite hacer esto, pero no me quiero enfocar tanto en este aspecto.

Ya que yo busco leer un EndPoint de API REST encontré una manera de solucionar esto, subir los archivos del proyecto a mi servidor y bueno con eso ya puedo leer los datos JSON, yo podría activar la característica para leer datos JSON en mi servidor, pero por seguridad no lo activaré, pero si mas adelante es necesario lo haré.

Entonces si abro el proyecto alojado en mi servidor, debería de ver la tabla con los datos JSON sin problemas.

Bien con esto entonces hemos leído un EndPoint de API REST que devuelve datos JSON, al inicio de cada Parte del Post he colocado una Demo en donde puedes ver el proyecto en acción, asimismo al inicio de esta 2da y última parte he colocado un enlace al repositorio GitHub en donde he colocado el código del proyecto.

Conclusión

Hemos aprendido en este tutorial como Leer un EndPoint de API REST que devuelve datos JSON con Vue JS 3 y Axios 0.21.1, si busca leer datos con tokens, headers y otros aspectos, te recomiendo leer la documentación oficial de axios en GitHub

Nota

  • Los pasos mencionadas y el código utilizado en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a Vue JS, Axios y Node JS.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos. 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
0 Comments
Inline Feedbacks
View all comments