Integración de productos y detalle con fetch
Contenido del curso
APIs y REST para consumidores
Setup y Arquitectura Base
Métodos HTTP en práctica con FakeStoreAPI
Optimización y próximos pasos
Integración de productos y detalle con fetch
Integración de productos y detalle con fetch
Contenido del curso
Dario Mendoza
asíncrono se refiere a operaciones que no bloquean la ejecución del programa. Por ejemplo, al hacer una solicitud de red (como fetch), el código puede seguir ejecutándose mientras espera la respuesta. La clase explica cómo usar async/await para manejar estas operaciones de forma más legible.
Bryan Castano
# **Codigo Repository.js**
El Archivo definido como ./public/js/repositories.js define una clases ProductRepository que es un patron de diseño de software "Repository" usado para separar la logica que trae datos desde la fuete "La flake api de /prodcuts" hacia la logica de negocios que actua en los datos, ewscencialmente esta clase acrua como un data manager dedicado para 'products' se encarga de todas la comunacion con el backend de la fake api.
## Metodo getProducts( categoriyId ) { }
Propósito: Obtener una lista de todos los productos de la API. Opcionalmente, se pueden filtrar por categoryId.
async: Esta palabra clave indica que la función realizará una operación asíncrona (como una llamada a la API) y devolverá una promesa.
URLSearchParams: Esta es una utilidad integrada del navegador para crear fácilmente cadenas de consulta de URL. Si se proporciona un categoryId, se añade a los parámetros (p. ej., ?categoryId=1).
Construcción de URL: Comienza con la URL base, añade el punto final /products/ y, a continuación, añade los parámetros de filtro, si existen.
await fetch(url): Este es el núcleo del método. Envía una solicitud GET a la URL de la API construida y espera la respuesta inicial del servidor.
Gestión de errores: Comprueba si la respuesta no fue correcta (!response.ok). Sin embargo, la lógica presenta un error. La condición !response.headers.get('content-type') != 'applicacion/json' es una doble negación y contiene un error tipográfico (applicacion). Intenta comprobar el tipo de contenido, pero no lo hace correctamente.
await response.json(): Si la solicitud es exitosa, esta línea lee el cuerpo de la respuesta y lo analiza como JSON.
return responseData: Devuelve la matriz de objetos del producto.
## Metodo getProduct( id ) { }
Propósito: Obtener un producto único usando su ID único.
Construcción de URL: Crea la URL añadiendo "/products/" y el ID del producto específico a la URL base (p. ej., .../api/v1/products/84/).
await fetch(...): Envía una solicitud GET para ese producto específico.
Manejo de errores: Esta sección también contiene errores.
El primer if tiene la misma lógica errónea que getProducts.
La condición else if es incorrecta: contentType.includes('application/json'). Esto genera un error si la respuesta es JSON, lo cual es lo opuesto al comportamiento deseado. Debería generar un error si la respuesta no es JSON.
await response.json(): Analiza la respuesta correcta en un objeto de producto.
return responseData: Devuelve el objeto de producto único.