Integración de productos y detalle con fetch

Conectar un frontend con una API REST implica más que llamar a fetch y mostrar datos. Cuando integras el listado de productos, el detalle individual y preparas el terreno para filtros, necesitas manejar errores, asincronismo y centralizar la lógica en un repositorio reutilizable.

Esto te sirve si estás aprendiendo JavaScript moderno y quieres pasar de datos mock estáticos a respuestas reales de un endpoint, replicando un flujo profesional de consumo de APIs.

¿Cómo manejar errores antes de extraer el JSON de fetch?

Antes de tocar el cuerpo de la respuesta, valida que la petición salió bien. Si la API está caída y devuelve un 500, tu app no puede asumir que llegó un JSON válido.

Dentro del método getProducts del repositorio, agrega dos validaciones clave:

• Verifica la propiedad ok de la respuesta. Si es false, lanza una excepción con un mensaje claro como no fue posible encontrar los productos.
• Revisa el header contentType. Si es diferente de application/json, también debe lanzar error, porque tu código está manipulando JSON.

¿Por qué validar el contentType si ya valido el ok? Porque un 200 con HTML o texto plano rompería tu parser. El header confirma que recibirás el formato esperado.

Una forma rápida de probar el método es abrir las DevTools, ir a sources, poner un breakpoint en el repositorio y ejecutar en consola algo como const repo = window.productRepository; await repo.getProducts(). Ahí ves la información retornada en tiempo real.

¿Cómo conectar el repositorio con el template del catálogo?

El archivo index.html tiene su lógica en index.js, que originalmente usaba un mock llamado currentProducts. Ese mock es una lista estática que ahora reemplazarás por datos del API.

¿Por qué la función initializeCatalog debe ser asíncrona?

Porque fetch es asíncrono y getProducts lo usa. Para esperar la respuesta sin bloquear el hilo, transformas initializeCatalog en una función async y la invocas con await. El listener que la dispara también debe declararse async.

El flujo dentro de la función queda así:

1. Obtén el repositorio desde window.productRepository.
2. Llama al método con const productResponse = await repo.getProducts().
3. Pasa productResponse como parámetro a renderProducts, la función que pinta cada tarjeta en el template.

Un console.log(productResponse) te confirma en la consola del navegador que llega un array de 51 elementos. Si recargas el sitio, las tarjetas ya muestran información real del API en lugar del mock.

¿Qué ventaja da centralizar las llamadas en un repositorio? Que toda la lógica de red vive en un solo lugar. Si mañana necesitas aplicar un categoryFilter, lo haces sobre un único método sin tocar el resto del código.

¿Cómo obtener el detalle de un producto por ID?

El listado es solo la mitad. Para mostrar la vista de detalle necesitas un segundo método que pida un producto específico.

¿Cómo se construye el método getProduct con un parámetro ID?

En la documentación del API, el detalle se consulta enviando el ID en la URL. La implementación es casi idéntica a getProducts, pero concatenas el parámetro al final del path:

javascript async getProduct(id) { const response = await fetch(${this.baseUrl}/api/v1/products/${id}); if (!response.ok) { throw new Error('No fue posible encontrar el producto'); } return await response.json(); }

La vista de detalle vive en su propio HTML y aún no usaba el repositorio. Copia la línea que expone window.productRepository desde el index y pégala en el detalle en el mismo orden.

¿Qué cambios necesita initializeDetail para usar la API?

Dentro de initializeDetail hay una validación que confirma si el productID está definido y luego invoca loadProductDetail. Ambas funciones deben volverse asíncronas.

Los pasos concretos son:

• Marca initializeDetail y loadProductDetail como async.
• Dentro de loadProductDetail, declara const repo = window.productRepository.
• Llama a const currentProduct = await repo.getProduct(productID).
• Si currentProduct no existe, muestra el estado de error que ya traía el template.
• Elimina el bloque viejo que reasignaba currentProduct, porque las constantes en JavaScript no se pueden reescribir y eso lanza un error visible en consola.

Al recargar y hacer clic en cualquier producto, la vista trae datos frescos del API, incluyendo campos nuevos como la fecha de creación que el mock no tenía.

¿Cómo verificar que la petición al endpoint funciona?

Abre las DevTools, ve a la pestaña Network y activa Preserve log. Al cambiar de vista verás una llamada a api/v1/products/8, donde 8 es el ID que se pasa como query param. La respuesta tiene la estructura que el template usa para pintar nombre, precio, descripción y demás campos.

Este flujo te deja un repositorio de productos con dos métodos listos: listado y detalle. Como práctica, crea un repositorio de categorías y lista las categorías dentro del template para reutilizar el mismo patrón.

¿Ya tienes tu repositorio de categorías funcionando? Cuéntame en los comentarios qué estructura usaste.