Vue Axios: Cómo consumir y manipular datos de una API REST

Importancia de consumir APIs REST en aplicaciones web

Las APIs REST (Representational State Transfer) proporcionan una forma estandarizada de intercambiar datos entre el servidor y el cliente a través de solicitudes HTTP. Esta arquitectura de comunicación permite una mayor modularidad, escalabilidad y flexibilidad en el desarrollo de aplicaciones.

De otra forma, nos ayuda a separar las tecnologías Backend y Frontend, consiguiendo ganar más flexibilidad a la hora de mostrar información a través de diversas Apps y propiciando una rápida integración de servicios de tercero, logrando una menor carga al servidor y, por tanto, unos costes de despliegues mucho menores con respecto a tecnologías tradicionales, como pueden ser la de arquitectura Modelo-Vista-Controlador (MVC). La arquitectura que se desarrolla está en un entorno en el que el servidor está permanentemente a la escucha de peticiones y cargando completamente el DOM de nuestra app, tras la navegación de un usuario.

Fundamentos de las APIs REST y cómo funcionan

Las APIs REST (Representational State Transfer) son la base de la interacción digital. En su núcleo, actúan como puentes digitales entre aplicaciones, permitiendo que se comuniquen y compartan información de manera coherente. Funcionan siguiendo un modelo cliente-servidor, donde las solicitudes del cliente (generalmente una aplicación o sitio web) se envían al servidor que aloja los datos.

La magia radica en los verbos HTTP, como GET para solicitar datos y POST para enviarlos. Además, los datos se transmiten en formato JSON, proporcionando una estructura legible para todas las partes. Este lenguaje común es el lienzo en el que las aplicaciones tejen su colaboración digital.

Qué es Axios y qué ventajas ofrece en el proceso

Axios es una biblioteca de JavaScript que goza de gran popularidad y que se utiliza ampliamente para realizar solicitudes HTTP.

Las principales ventajas de esta librería son su facilidad de uso, soporte para solicitudes y respuestas interceptadas, así como su compatibilidad con los navegadores modernos y entornos basados en Node.js.

Por otro lado, se trata de una librería muy extendida que está disponible para multitud de frameworks y tecnologías web, y qué con un par de comandos, está lista para utilizarse en nuestro proyecto.

Guía para consumir una API REST con Vue.js y Axios

Ahora que comprendemos de forma básica los fundamentos, es el momento de adentrarnos en la guía para consumir una API REST utilizando Vue.js y Axios. Aquí se detallarán los pasos necesarios para configurar el entorno y realizar las solicitudes HTTP a la API.

Configuración del entorno

Antes de comenzar a consumir la API REST, debemos asegurarnos de tener un entorno de desarrollo adecuado. En esta sección, cubriremos la instalación de Vue.js y Axios, así como la creación de un nuevo proyecto de Vue.js.

De forma previa debemos tener instalado la librería node.js y el gestor de paquetes de Node, Npm.

Además, como API, utilizaremos Placeholder, un servicio de API ficticio que replica las operaciones de una API REST real. Ofrece datos de muestra en formato JSON para practicar y probar el consumo de APIs.

Este servicio brinda una experiencia auténtica al simular respuestas de solicitudes GET, POST, PUT y DELETE, y es una herramienta esencial para adentrarse en el mundo de las APIs antes de conectarse a servicios reales.

Instalación de Vue.js y Axios

Los pasos son realmente sencillos, por un lado, creamos un proyecto básico de Vue.js y una vez creado, la instalación e importación de la biblioteca Axios.

Creación de un proyecto de Vue.js

Crearemos un nuevo proyecto de Vue.js utilizando la interfaz de línea de comandos (CLI) de Vue.js, siguiendo los siguientes pasos:

1. Instalar @vue/cli

   Empezaremos por instalar Vue.js CLI, una herramienta que hará que nuestro primer proyecto sea mucho más fácil. Usando Vue.js CLI, podemos crear una aplicación Vue.js lista para usar, con todas las dependencias necesarias. Para instalar la herramienta, usaremos el siguiente comando para el gestor npm:

   npm install -g @vue/cli
   

2. Crear un proyecto

   Una vez instalado Vue.js CLI, la construcción de un proyecto Vue.js es muy sencilla. En primer lugar, nos desplazamos hasta la carpeta en la que se desea crear la aplicación, abrimos una terminal y en la línea de comandos y ejecutaremos el siguiente comando:

   vue create myFirstVue.jsApp
   

   myFirstVue.jsApp es el nombre de nuestro proyecto. Se puede elegir cualquier otro nombre para la aplicación, dependiendo de las preferencias del usuario. Después de que se ejecute el comando, aparecerá una instrucción para elegir un preset y varias opciones.

   Para no complicarlo demasiado vamos a seleccionar la configuración predeterminada. A continuación, se iniciará la instalación, que puede tardar unos segundos. Una vez que haya terminado con éxito, se mostrará una nueva carpeta, con una serie de archivos en su interior. Hemos creado nuestra primera aplicación con Vue.js.

3. Iniciar un proyecto

   Para iniciar nuestro proyecto Vue.js, debemos dirigirnos a la carpeta recién creada con el nombre de nuestro proyecto, y ejecutamos el comando:

   npm run serve
   

   Instalación de Axios
   Una vez que hemos creado nuestro proyecto Vue.js tenemos que instalar la librería Axios, es tan sencillo como ejecutar el siguiente comando en el directorio raíz del proyecto, en una terminal de comandos:

   npm install axios
   

   La ejecución de este comando incorporará una nueva dependencia en nuestro archivo packaje.json. De esta forma se garantiza el funcionamiento de nuestra aplicación en multitud de equipos o despliegues, simplemente instalando las dependencias con el comando npm install.

Configuración de Axios para el consumo de la API REST

En este apartado, aprenderemos cómo configurar Axios en nuestro proyecto de Vue.js para realizar solicitudes con métodos http a la API REST.

Consumo de la API REST con Axios

Una vez que tenemos todo configurado, podemos comenzar a consumir la API REST con Axios. En esta sección, cubriremos cómo realizar diferentes tipos de solicitudes HTTP, para interactuar con la API.

A modo de recordatorio debemos conocer las principales solicitudes HTTP que existen:

En los servidores, es común crear lo que se denomina una API REST. Una API es un conjunto de puntos finales o rutas diseñadas para recibir solicitudes HTTP. Estas solicitudes pueden ser de diversos tipos:

• GET: Devuelven información de manera directa.
• POST: Estos puntos finales envían información, generalmente para crear o ejecutar acciones en - recursos alojados en bases de datos.
• PUT: Envían información al punto final para actualizar un recurso específico.
• DELETE: Utilizados para eliminar recursos almacenados en el servidor.

Realización de solicitudes GET, POST, PUT y DELETE

En este apartado, explicaremos cómo utilizar Axios para realizar solicitudes HTTP y cómo manejar las respuestas. Para mejorar la comprensión expondremos un ejemplo de aplicación que comprende varios aspectos y que se explicarán más adelante:

<template>
 <div>
              <div v-for="(item, key) in totalResults" :key="key">
     <ul>
     <li>Titulo: {{ item.title }}</li>
     <li>Descripción: {{ item.body }}</li>
     <li>
     <button @click="deleteRegister(item.id)">Eliminar</button>
     </li>
     </ul>
     </div>
    </fieldset>
    <div v-if="loading" class="loader">Cargando...</div>
    <form>
     <!-- ... (resto del formulario) ... -->
    </form>
 </div>  
</template>

<style>
.loader {
 display: flex;
 align-items: center;
 justify-content: center;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 9999;
 color: white;
}
</style>

<script setup>


const saveData = async () => {
 try {
    loading = true; // Activar el loader
    await  Axios.post(url, data);
    getData();
 } catch (error) {
    alert(error);
 } finally {
    loading = false; // Desactivar el loader
 }
};

const getData = async () => {
 try {
    loading = true; // Activar el loader
    const response = await  Axios.get(url);
    totalResults.value = response.data;
 } catch (error) {
    alert(error);
 } finally {
    loading = false; // Desactivar el loader
 }
};

const deleteRegister = async (id) => {
 try {
    loading = true; // Activar el loader
    await  Axios.delete(`${url}/${id}`);
    getData();
 } catch (error) {
    alert(error);
 } finally {
    loading = false; // Desactivar el loader
 }
};

let loading = false; // Variable para controlar la visibilidad del loader

getData(); // Cargar datos iniciales al cargar la página
</script>

En cuanto los diferentes métodos que tenemos a la hora de conectarnos a un servicio Api Rest, en primer lugar, tenemos una petición get, que trae todos los datos de esa fake Api Rest, lo guarda en una variable y lo mostramos en pantalla.

Por otro lado, tenemos un pequeño formulario que da de alta un nuevo registro, para ello debemos pasar un objeto, en formato JSON, a la petición Post.

Una vez que la operación ha sido satisfactoria se recarga la paǵina para mostrar el último registro añadido, y por último tenemos una petición para eliminar los registros mediante el identificador, esta función se activa cuando se pulsa en el botón, envía el identificador junto a la url y volvemos a cargar los registros, para que el usuario disponga siempre de los datos actualizados, este último caso sería un ejemplo de petición de tipo Delete.

Manejo de errores y excepciones

Los errores pueden ocurrir en las solicitudes HTTP por múltiples motivos: no se encuentra el registro, los datos enviados no son correctos o el servicio está inoperativo.

Para el control de errores, envolvemos la petición en un bloque try-catch, creamos un variable de tipo Booleano que modificamos a verdadero para mostrar un mensaje de error en la vista, si fuera el caso. Además, si queremos informar del tipo problema podemos mostrar el mensaje que nos aporta la librería Axios, en la que se nos informa del error producido. El siguiente ejemplo muestra el control de errores en una petición Get.

try {
    loading = true; // Activar el loader
    const response = await  Axios.get(url);
    totalResults.value = response.data;
 } catch (error) {
    alert(error);
 } finally {
    loading = false; // Desactivar el loader
 }

Integración de la API REST en una aplicación Vue.js

En esta sección, llevaremos nuestra interacción con la API REST al siguiente nivel, integrando los datos en una aplicación Vue.js más completa y funcional.

Uso de componentes para mostrar los datos de la API

Para ello crearemos un archivo service.js, que podremos reutilizar en múltiples vistas:

import  Axios from ' Axios';

const url = 'URL_DE_TU_API_REST'; // Reemplaza con la URL de tu API REST

export async function fetchData() {
 try {
 const response = await  Axios.get(url);
 return response.data;
 } catch (error) {
 throw error;
 }
}

export async function saveData(data) {
 try {
 const response = await  Axios.post(url, data);
 return response.data;
 } catch (error) {
 throw error;
 }
}

export async function deleteData(id) {
 try {
 const response = await  Axios.delete(`${url}/${id}`);
 return response.data;
 } catch (error) {
 throw error;
 }
}

Por otro lado, nuestro componente Vue.js anterior lo dividiremos en dos para asegurar su reutilización y modularidad

Componente PostList.vue Este componente mostrará la lista de posts:

<template>
 <div>
    <fieldset>
     <legend>Lista de Posts</legend>
     <div v-for="(item, key) in totalResults" :key="key">
     <!-- Mostrar información del post aquí -->
     </div>
    </fieldset>
    <div v-if="loading" class="loader">Cargando...</div>
    <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
 </div>
</template>

<script setup>
import { ref } from 'vue';

const totalResults = ref([]);
const loading = ref(false);
const errorMessage = ref('');

</script>

<style>
/* Estilos necesarios */
</style>

Componente PostForm.vue: Este componente mostrará el formulario y maneja las interacciones para agregar nuevos posts:

<template>
 <form>
    <div class="formInput">
     <label for="title">Título</label>
     <input v-model="postData.title" type="text" id="title" />
    </div>
    <div class="formInput">
     <label for="body">Descripción</label>
     <textarea v-model="postData.body" id="body"></textarea>
    </div>
    <button @click="savePost">Guardar</button>
 </form>
</template>

<script setup>
import { ref } from 'vue';
import { saveData } from './service';

const postData = ref({ title: '', body: '' });

const savePost = async () => {
 try {
    // Validar los datos antes de enviar
    await saveData(postData.value);
    // Limpiar los datos después de guardar
    postData.value = { title: '', body: '' };
 } catch (error) {
    // Manejar errores
 }
};

</script>

<style>
/* Estilos necesarios */
</style>

Componente ParentComponent.vue: Este componente será el padre que utilizará los componentes PostList y PostForm:

<template>
 <div>
    <post-form @post-added="handlePostAdded" />
    <post-list :posts="posts" />
 </div>
</template>

<script setup>
import { ref } from 'vue';
import PostList from './PostList.vue';
import PostForm from './PostForm.vue';

const posts = ref([]);

const handlePostAdded = (newPost) => {
 posts.value.push(newPost);
};

</script>

Como puedes observar, ahora nuestra aplicación es más modular y podemos utilizar los componentes en otros sitios, además a la hora de depurar errores, es mucho más sencillo pues ya cada componente tiene una responsabilidad diferente.

Implementación de funcionalidades adicionales

Como funcionalidades adicionales hemos añadido el control de errores, y el indicador de tiempo de carga, como mejora adicional sería interesante disponer de una ventana modal de edición y de confirmación de borrado para mejorar la funcionalidad de nuestra aplicación, además de integrar seguridad en nuestro endpoints.

Consideraciones adicionales

En esta sección, abordaremos algunas consideraciones adicionales que son importantes al trabajar con APIs REST y Axios en una aplicación Vue.js.

Autenticación y autorización en las solicitudes:

Actualmente nuestra aplicación no tiene seguridad y estos endpoints pueden ser utilizados por cualquier usuario, para ellos debemos implementar un sistema de Tokens, tales como el de JWT, y se lo pasaremos a la petición Axios de esta forma:

<script setup>
import  Axios from ' Axios';

const accessToken = 'AQUI_VA_TU_TOKEN_JWT';

 Axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;

// Resto de la lógica del componente
// ...

</script>

Paginación y carga progresiva de datos

Estos aspectos son cruciales en las API REST debido a su impacto en la eficiencia, la experiencia del usuario y el rendimiento del servidor. Al manejar grandes conjuntos de datos, la paginación divide los resultados en porciones más manejables, lo que evita la sobrecarga en la transferencia de información y mejora la velocidad de carga de la aplicación. Esto es especialmente relevante en dispositivos móviles o conexiones lentas, donde cargar todo el contenido a la vez podría ser lento y frustrante para los usuarios.

Normalmente para realizar una paginación, se implementa un parámetro dinámico que interactúa con un componente y permite hacer una carga controlada, en función de la página que se solicita al backend. Si asumimos que estamos trabajando con una API que admite paginación a través de parámetros page y limit, estas funciones pueden ser un ejemplo de estos aspectos.

 async function fetchItems(page) {
      try {
        const response = await axios.get('/api/items', {
          params: {
            page: page,
            limit: itemsPerPage,
          },
        });
        return response.data;
      } catch (error) {
        console.error('Error al obtener los elementos:', error);
        throw error;
      }
    }

    async function loadMore() {
      currentPage.value++;
      const newItems = await fetchItems(currentPage.value);
      items.value = [...items.value, ...newItems];
    }

Optimización y rendimiento en la comunicación con la API

Mejorar la optimización y rendimiento en la comunicación con la API es crucial para una experiencia fluida en nuestra App. A través de técnicas como la gestión eficiente de solicitudes, la compresión de datos y el uso de cachés locales, se puede minimizar el tiempo de carga y maximizar la velocidad de respuesta. Además, optimizar la estructura de datos transmitidos y reducir la sobrecarga de red contribuirá a una comunicación más eficaz.

En este ejemplo, se utiliza una instancia personalizada de Axios para establecer una base URL y un tiempo de espera para las solicitudes. También se implementa un sistema de caché local utilizando el objeto Map para almacenar las respuestas de las solicitudes previas y evitar solicitudes duplicadas.

La función fetchData maneja la solicitud de datos a la API. Si los datos solicitados ya están en caché, se devuelven directamente desde la caché, lo que reduce la cantidad de solicitudes a la API. Si no están en caché, se realiza una solicitud a la API, se almacenan en caché los datos de respuesta y luego se devuelven.

Este ejemplo optimiza el rendimiento al minimizar las solicitudes repetidas y reducir el tiempo de espera, lo que proporciona una experiencia más rápida y eficiente.

import axios from 'axios';

const apiService = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000, // Tiempo máximo de espera por respuesta
});

// Implementar caché local para respuestas frecuentes
const cache = new Map();

async function fetchData(endpoint) {
  if (cache.has(endpoint)) {
    return cache.get(endpoint);
  }

  try {
    const response = await apiService.get(endpoint);
    cache.set(endpoint, response.data);
    return response.data;
  } catch (error) {
    console.error('Error en la solicitud:', error);
    throw error;
  }
}

export default fetchData;

Conclusiónes

En resumen, Vue.js y Axios son herramientas poderosas que nos permiten crear aplicaciones web modernas y eficientes al consumir y manipular datos de APIs REST. Con esta guía, esperamos haber brindado un enfoque paso a paso para lograrlo y proporcionar una visión clara de cómo trabajar con estas tecnologías.

El conocimiento y dominio de estas técnicas no sólo enriquecerán tus habilidades como desarrolladores web, sino que también nos permitirán crear aplicaciones más robustas y escalables. A medida que avanzamos hacia el futuro, el consumo de APIs REST y el uso de bibliotecas como Axios seguirán siendo fundamentales en el desarrollo de aplicaciones web innovadoras y en sintonía con las tendencias de la industria. ¡Esperamos que esta guía te haya sido útil y te inspire a seguir explorando y mejorando tus habilidades en el desarrollo web!

Por último, recuerda que puedes ampliar tus habilidades con nuestros cursos y talleres, para el tema de este post te proponemos estos dos: el curso de Vue práctico en la vida real y el Curso de Ajax con Axios. 

Puedes tener acceso a muchas más formaciones para ampliar tus conocimientos sobre este tema y otros temas relacionados, suscribiéndote al Plan Profesional de OpenWebinars, donde podrás disfrutar de los 15 días iniciales de forma gratuita para llevar tus habilidades a un nivel superior.

También debes saber que si tu objetivo es potenciar la formación de tu equipo, puedes solicitar una demostración gratuita de OpenWebinars, con la que podrás experimentar todas las ventajas que ofrecemos en cuanto a la formación de equipos.