Consumir una API con reactive en Vue

Contenido del curso

Conceptos básicos de Vue

Reactividad en Vue

Composición en Vue

Manejo de eventos e inputs

Optimización en Vue

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:31

Consumir una API con reactive en Vue

Curso de Vue.js

Clase 18 de 34

Clase 18 / 34

Recursos

Consumir una API en Vue es tan directo como usar fetch de JavaScript, pero la magia aparece cuando combinas la petición con el ciclo de vida del componente y un objeto reactivo que detecta cambios profundos en la respuesta. Aquí aprenderás a clonar un proyecto base desde GitHub, conectar tu API y manejar estados de carga, error y datos con reactive.

Cómo clono el proyecto base desde GitHub para empezar

Antes de escribir código nuevo, necesitas el punto de partida correcto. El proyecto vive en un repositorio y trae todos los componentes listos para que tú solo te enfoques en consumir la API.

La rama clave es starting-project. Una vez clonado, te mueves a esa rama con git checkout starting-project y abres la carpeta en Visual Studio Code [00:38].

Dentro encontrarás una carpeta components con piezas pensadas para clonar la página de Game Stream:

Card: muestra la información de cada juego.
GameGallery: presenta la galería completa.
GameLayout: actúa como wrapper que acomoda los elementos.
GameModal: abre el video del juego.
GameTags: renderiza las etiquetas.
GameVideoPlayer: reproduce el video [01:15].

Pensar en componentes así, identificando cada bloque visual de la interfaz, es la forma correcta de estructurar una app en Vue.

Cómo hago la primera petición fetch dentro de App.vue

La petición la haremos desde la raíz de la aplicación, en App.vue. La receta es la misma que en JavaScript puro: declaras una constante con la URL de la API y usas fetch dentro de una función asíncrona.

js const API_URL = 'https://tu-api/games'

async function fetchGames() { const response = await fetch(API_URL) const json = await response.json() console.log(json) }

Como fetch y response.json() son procesos asíncronos, ambos necesitan await. Hasta aquí todo es JavaScript clásico [03:20].

¿Dónde debo ejecutar la función fetch en Vue? Dentro del hook onMounted, que se dispara cuando el componente ya tiene su HTML y JavaScript renderizados en el navegador. Ese es el momento seguro para pedir datos.

Importas onMounted desde vue y le pasas un callback que llama a fetchGames(). Al guardar y abrir la consola, verás el array de juegos llegando directo desde la API [04:45].

Por qué onMounted debe ser síncrono

Los hooks del ciclo de vida en Vue son síncronos. No puedes pasarle un async/await directamente al callback de onMounted. Llama a tu función asíncrona desde adentro, pero no conviertas el hook mismo en asíncrono.

Qué es un objeto reactivo y cuándo conviene usarlo

Una petición sin manejo de errores ni estado de carga está incompleta. Aquí entra reactive, la tercera forma de declarar reactividad en Vue, después de ref y computed.

¿Qué es un objeto reactivo en Vue? Es un objeto creado con reactive() que permite detectar cambios de forma profunda en sus propiedades, ideal para manejar respuestas de API, formularios complejos o estructuras anidadas.

La mayor ventaja es la reactividad profunda: si cambia una propiedad en el nivel tres o cuatro de un objeto grande, Vue lo detecta. La contraparte es que tiene un costo de performance mayor y, si desestructuras sus propiedades, pierden la reactividad [07:30].

Cómo declaro state con reactive para manejar carga, error y datos

La convención es agrupar tres propiedades en un solo objeto state: el error, el indicador de carga y los datos.

js import { reactive, onMounted } from 'vue'

const state = reactive({ error: null, isLoading: false, data: [] })

A diferencia de ref, no necesitas usar .value para acceder a las propiedades. Escribes state.data o state.error y listo, sigue siendo reactivo [08:15].

Cómo integro try catch finally con el objeto reactivo

Con el state listo, refactorizas fetchGames para que actualice cada propiedad según lo que ocurra en la petición.

js async function fetchGames() { state.isLoading = true try { const response = await fetch(API_URL) const json = await response.json() state.data = json } catch (error) { console.error(error) state.error = error } finally { state.isLoading = false } }

onMounted(() => { fetchGames() })

El bloque try asigna los datos cuando la petición es exitosa. El catch captura cualquier fallo y lo guarda en state.error. Y el finally se ejecuta siempre, garantizando que isLoading vuelva a false sin importar el resultado [09:50].

¿Cuándo uso reactive en lugar de ref? Usa reactive para objetos o arrays donde necesitas detectar cambios profundos, como respuestas de API. Usa ref para valores primitivos como números, strings o booleanos sueltos.

Una advertencia importante: si haces const { data } = state, esa variable data deja de ser reactiva. Mantén siempre el acceso vía state.propiedad para conservar la conexión con Vue.

Con esta base ya tienes el patrón completo: clonar el proyecto, consumir la API en onMounted, y centralizar el estado de la petición en un objeto reactivo. ¿En qué parte de tu app actual usarías reactive para limpiar tu manejo de estado? Cuéntame en los comentarios.

Conceptos básicos de Vue

Gráfica de barras reactiva con Vue.js

Creación de un Proyecto Vue desde Cero

Estructura de un Single File Component en Vue

Fundamentos de Vue.js: Montaje y Virtual DOM

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Agregar estilos globales y scripts en aplicaciones Vue.js

Sintaxis Vue: v-bind y dobles corchetes

Props y Comunicación entre Componentes en VueJS

Validación de props en Vue con tipos y reglas

Vue 3: Uso y Ventajas de la Composition API

Reactividad en Vue

Reactividad en Vue con ref

Reactividad con `ref` en Vue 3: Creación y Uso Práctico

Uso de Watchers en Vue para Controlar Estados Reactivos

Computed properties en Vue y su caché

v-if vs v-show no Vue explicados

Ciclos de Vida de Componentes en Vue 3: Guía Completa

Composición en Vue

Pensamiento por componentes en Vue

Consumir una API con reactive en Vue

Diferencias entre reactive y ref en Vue 3

Renderizar listas con v-for en Vue

Slots y named slots en Vue

Herencia de Atributos en Componentes Vue: Uso y Ejemplos Prácticos

Manejo de eventos e inputs

Manejo de Inputs y Estado con VModel en Vue.js

Eventos y Modificadores en Vue: Focus y Blur en Searchbar

Eventos EMIT en Vue: Comunicación entre Componentes

Optimización en Vue

Componentes dinámicos con la tag component

Implementación de Modales y Manejo de Estado Global en Vue.js

Uso de Teleport en Vue para Optimizar el Renderizado de Modales

Uso de Composables en Vue para Reutilización de Lógica

refs en Vue para acceder al DOM real

Virtual DOM en Vue: Funcionamiento y Beneficios

Despliegue

Despliegue de Aplicaciones Vue: De Desarrollo a Producción

Cómo desplegar Vue en Netlify con GitHub

Despliegue de Aplicaciones Web con GitHub Actions y Pages

Consumir una API con reactive en Vue