Patrón repositorio en JavaScript para centralizar peticiones al API

Centraliza las peticiones al API con un patrón repositorio en JavaScript para evitar cambios dispersos, mejorar pruebas y depurar con precisión. Aquí verás cómo crear una clase, integrar fetch y usar el debugger del navegador para inspeccionar datos en tiempo real.

¿Por qué usar el patrón repositorio en JavaScript con fetch y API?

El patrón repositorio permite encapsular la lógica de acceso a datos en una clase única. Si el API cambia (por ejemplo, el campo pasa de id a identificador), actualizas una sola pieza de código y todo sigue funcionando.

• Centralización de llamadas al endpoint.
• Menos duplicación y menos errores.
• Cambios controlados ante evoluciones del API.
• Mejor testabilidad y mantenibilidad.
• Cohesión con programación orientada a objetos: clase, constructor, instancia y encapsulación.

¿Qué problema resuelve exactamente?

• Cambios de contrato del API sin tocar múltiples archivos.
• Reutilización de métodos como getProducts en distintas vistas.
• Un solo lugar para manejar response, JSON y errores.

¿Qué conceptos clave aparecen?

• Vanilla JavaScript y HTML sin framework.
• Objeto global del DOM: window.
• Prototipo de clases: en el prototype vive el método getProducts.
• Depuración con debugger, breakpoints y panel sources.

¿Cómo implementar ProductRepository y centralizar la URL del API?

Creamos un archivo en js: repositories.js. Definimos una clase que recibe la URL base del API y expone un método asíncrono para obtener productos desde el endpoint products.

// js/repositories.js
class ProductRepository {
  constructor(url) {
    this.url = url; // URL base del API (sin slash final).
  }

  async getProducts() {
    const response = await fetch(`${this.url}/products`);
    const responseData = await response.json();
    return responseData; // Retorna datos en JSON.
  }
}

// Exponer una instancia global para uso en el navegador.
// Asegúrate de pasar la URL sin slash final para evitar "//".
window.productRepository = new ProductRepository("https://tu-api.com");

Integramos el script en el template (después de los auxiliares como mockdata):

<!-- index.html -->
<script src="./js/mockdata.js"></script>
<script src="./js/repositories.js"></script>

• La URL debe ir sin el slash final para evitar doble concatenación con /products.
• Al cargar la página, tendrás disponible en window la instancia: window.productRepository.
• Esto habilita un punto único de acceso a productos, categorías u otras entidades que agregues.

¿Cómo se usa desde la consola?

• Crea una referencia: const repo = window.productRepository.
• Llama al método: await repo.getProducts().
• Obtendrás un arreglo de productos listo para pintar en tu template.

¿Cómo depurar con el debugger del navegador y breakpoints?

Abrir las DevTools y usar el panel sources te permite pausar la ejecución, inspeccionar variables y entender cada paso del fetch.

• Abre sources y localiza js/repositories.js.
• Coloca un breakpoint dentro de getProducts.
• En la consola: const repo = window.productRepository.
• Ejecuta: await repo.getProducts() y la ejecución se pausará.
• Inspecciona response y responseData para verificar estructura y valores.

¿Qué habilidades prácticas aplicas?

• Uso de await en la consola del navegador.
• Inspección de objetos anidados: responseData[4].images[0] para acceder a la primera imagen del quinto producto.
• Corrección rápida de propiedades: diferenciar images de image al explorar datos.
• Continuación de la ejecución tras una pausa y observación de la respuesta del endpoint.

¿Qué beneficios obtienes al depurar así?

• Entiendes el flujo real antes de pintar datos en el template.
• Detectas contratos del API y nombres de campos con precisión.
• Ajustas el repositorio sin tocar componentes de UI.

¿Te gustaría que mostremos cómo pintar los productos en el template con el verbo GET y buenas prácticas de renderizado? Comparte tus dudas y retos en los comentarios.