Integración de catálogo con API: listado y detalle asíncrono

Conecta tu catálogo de productos a un API real con fetch, maneja errores como un profesional y renderiza listado y detalle de forma asíncrona. Aquí verás cómo reemplazar mocks por datos vivos, depurar en el navegador y preparar el terreno para filtros y paginación sin complicaciones.

¿Cómo integrar el listado con un API usando async/await y manejo de errores?

La clave es convertir la inicialización del catálogo a asíncrona, consumir el repositorio desde window y validar la respuesta antes de parsear el JSON. Así garantizas que solo renderizas datos correctos y evitas fallos por content-type inesperado.

• Centraliza el acceso al API en un repositorio único.
• Valida response.ok antes de response.json().
• Verifica el header content-type: application/json.
• Usa async/await en initializeCatalog y en el listener que la invoque.
• Reemplaza el mock por la respuesta del API en renderProducts.

¿Cómo luce el método getProducts con validaciones?

async function getProducts() {
  const res = await fetch(`${BASE_URL}/products`);

  if (!res.ok) {
    throw new Error('No fue posible encontrar los productos.');
  }

  const contentType = res.headers.get('content-type') || '';
  if (!contentType.includes('application/json')) {
    throw new Error('La respuesta no es JSON.');
  }

  return await res.json();
}

¿Cómo inicializar initializeCatalog con async/await?

async function initializeCatalog() {
  const repo = window.productRepository; // repositorio disponible en window
  const productResponse = await repo.getProducts();
  renderProducts(productResponse); // pintar lista desde el API
}

Beneficios inmediatos: un único flujo para filtrar por categoría o aplicar paginación, pues todo parte de un mismo método y un solo parámetro de entrada.

¿Cómo depurar y validar respuestas en el navegador?

Usa las herramientas del navegador para confirmar que los datos llegan y dónde fallan si algo sale mal. Con inspeccionar elementos, Sources y un break point, verás la pausa en la ejecución y podrás leer el estado de las variables; con console.log corroboras que llega, por ejemplo, un arreglo de cincuenta y un elementos. En Network, activa preserve logs para ver cada petición, su endpoint y la estructura del response.

• Abre Sources y coloca un break point en el repositorio y en la vista.
• Lanza await repo.getProducts() desde la consola para probar.
• Revisa Network y confirma el endpoint: api/v1/products.
• Observa el response y su estructura antes de renderizar.
• Mantén un console.log temporal para facilitar el debugging.

Sugerencia práctica: quita impresiones y break points una vez validado el flujo para no contaminar la consola.

¿Cómo obtener y renderizar el detalle con getProduct(id)?

Para el detalle, añade un método en el repositorio que reciba el ID y consulta el endpoint de un único recurso. Haz asíncronos initializeDetail y loadProductDetail, obtén el repositorio desde window y maneja el estado cuando no haya datos.

¿Cómo se implementa getProduct(id) en el repositorio?

async function getProduct(id) {
  const res = await fetch(`${BASE_URL}/products/${id}`);

  if (!res.ok) {
    throw new Error('No fue posible obtener el producto.');
  }

  const contentType = res.headers.get('content-type') || '';
  if (!contentType.includes('application/json')) {
    throw new Error('La respuesta no es JSON.');
  }

  return await res.json();
}

¿Cómo cargar el detalle con initializeDetail y loadProductDetail?

async function initializeDetail() {
  // productId ya validado previamente en la vista
  await loadProductDetail(productId);
}

async function loadProductDetail(productId) {
  const repo = window.productRepository;
  const currentProduct = await repo.getProduct(productId);

  if (!currentProduct) {
    // Muestra el estado de error definido en el template.
    return;
  }

  // Pinta la información del producto en el template.
}

Puntos finos que evitarán errores:

• No reescribas una const en JavaScript: respeta su inmutabilidad.
• Elimina bloques heredados del template que ya no se usan al consumir el API.
• Verifica en Network que se llama al endpoint correcto, por ejemplo api/v1/products/:id, pasando el ID como query param o segmento según la definición disponible.
• Observa nuevos campos útiles en la respuesta, como la fecha de creación, para enriquecer la vista cuando existan.

Próximos pasos que potencian la integración:

• Crea un repositorio de categorías y lista categorías para el template.
• Usa URLSearchParams para filtros y paginación en el listado.

¿Tienes dudas sobre el patrón de repositorio, el manejo de errores o el uso de async/await? Comparte tu pregunta y cuéntame qué parte te gustaría profundizar.