Consumiendo ProductHttpService
Curso de TypeScript: Programación Orientada a Objetos y Asincronismo
Contenido del curso
Fundamentos de POO
POO Avanzada
Asincronismo y consumo de APIs
Genéricos
Próximos pasos
Consumiendo ProductHttpService
Consumiendo ProductHttpService
Curso de TypeScript: Programación Orientada a Objetos y Asincronismo
Contenido del curso
Miguel Angel Reyes Moreno
Cesar More Sanchez
Ronaldo Delgado
Katerin Calderón
Ivan Sangueza Alarcon
Santiago Andres Alvarez Cuadros
Max Andy Diaz Neyra
Manuel Cabos
Bruno Balzarelli
Manuel Cabos
Luis Angel Flores Galindo
Walter Omar Barrios Vazquez
Ivan David Martinez Baron
Diego Raciel Ortega Hernandez
Andre Huaman Yovera
Fabian Andres Parra Sanchez
David Rangel
Ronaldo Delgado
Gerardo Alberto Soto Alvarez del Castillo
Andre Huaman Yovera
Diego Raciel Ortega Hernandez
Elioenai Garcia
Existe una extensión de VS Code que funciona igual que Postman, se llama 'Thunder Client'. Se las recomiendo mucho para que necesiten tener que instalar otro programa en su laptop.
Excelente! Muchas gracias!
Genial!
En Visual Studio podemos instalar la extensión RapidAPI Client, funciona muy similar a Postman o Insomnia. Esta extensión nos crea un acceso en la parte izquierda parece un fantasma y nos permite agregar Body a nuestras peticiones, personalizar el nombre y URL y nos muestra la respuesta, tal cual se ve en esta imagen, espero les sea Útil.
En ES2022 se introdujeron los top-level awaits, donde ya podemos utilizar await por fuera de funciones asíncronas siempre y cuando estemos usando un módulo. Si queremos obligar a un archivo a ser un ESModule, basta con colocar un export en cualquier variable en el documento, incluso un export vacío: . Antes:
(async () => { const notATopLevelAwait = await fetch(unaUrlRandom); })();
Con ES2022:
const topLevelAwait = await fetch(unaUrlRandom); export {}
excelente aporte
La API ha cambiado estos años, a la fecha marzo 2025 al hacer update da error 500 si no envías obligatoriamente la propiedad image:
image
image
Intente hacer lo mismo que vos, y a mi me sigue dando error 500
Creo que puede ser por el nombre de la propiedad, dije image y es images. Lo he vuelto a probar ahora y si me funciona. Cambiando el ID del producto porque ya no existía.
Singleton
class ProductHttpService implements ProductService { private static instance: ProductHttpService | null = null; private url = 'https://api.escuelajs.co/api/v1/products'; private constructor() {} public static getIntance(): ProductHttpService { if (ProductHttpService.instance === null) { ProductHttpService.instance = new ProductHttpService(); } return ProductHttpService.instance; } // code del contrato(interface) del ProductService... }
Ejemplo de comprobación:
const productService = ProductHttpService.getIntance(); const productService1 = ProductHttpService.getIntance(); console.log(productService === productService1); // debe ser true para indicar que es la misma instancia
Una opción para visualizar el mensaje de error en el catch:
}catch(err:any) { console.error(err.response.data); }
¿Por que Typescript no me alerta al usar las funciones del productService al no usar await?
Por que no da un error como tal. Simplemente congela la aplicación hasta que se haya completado el proceso.
TypeScript no te alerta al usar funciones del ProductService sin el operador await porque la sintaxis y el uso de async/await son específicos de JavaScript y no están relacionados directamente con el sistema de tipos de TypeScript.
.
La sintaxis async/await es una forma de escribir código asincrónico de manera más sincrónica, lo que facilita su lectura y comprensión. Cuando marcas una función con la palabra clave async, estás indicando que dicha función devuelve una promesa. Luego, al usar el operador await dentro de una función async, estás esperando a que una promesa se resuelva antes de continuar con la ejecución.
.
Sin embargo, TypeScript no puede realizar inferencias precisas sobre el flujo de ejecución de tu programa en tiempo de compilación. Por lo tanto, no puede detectar automáticamente si estás usando o no await correctamente en las funciones async. Es tu responsabilidad como desarrollador utilizar correctamente await para esperar las promesas y manejar los resultados de manera adecuada.
.
Si omites el uso del operador await al llamar a una función async, la función se ejecutará de forma asincrónica sin esperar a que se resuelva la promesa. Esto puede llevar a comportamientos inesperados o resultados incorrectos en tu código.
.
Para asegurarte de utilizar correctamente await en las funciones async y obtener alertas o errores relacionados, puedes habilitar la opción noUncheckedPromises en el archivo de configuración de TypeScript (tsconfig.json). Esta opción activa un control más estricto sobre el uso de promesas y ayuda a detectar posibles errores al no esperar las promesas correctamente.
Hola, este seria el codigo para volver la clase al Patron Singleton.
export class ProductFetch{ private static instance: ProductFetch; private constructor() {} public static getIntance(): ProductFetch { if (!ProductFetch.instance) ProductFetch.instance = new ProductFetch(); return ProductFetch.instance; } }
Singleton:
// product-http.service.ts import axios from 'axios'; import { ProductService } from '../models/product-service.model'; import { Product } from '../models/product.model'; import { UpdateProductDto, CreateProductDto } from '../dtos/product.dto'; export class ProductHttpService implements ProductService { private url = 'https://api.escuelajs.co/api/v1/products'; private static instace: ProductHttpService | null = null; private constructor() {} static getInstance(): ProductHttpService { if (!ProductHttpService.instace) { ProductHttpService.instace = new ProductHttpService(); } return ProductHttpService.instace; } async getAll() { const { data } = await axios.get<Product[]>(this.url); return data; } async update(id: Product['id'], changes: UpdateProductDto) { try { const { data } = await axios.put(`${this.url}/${id}`, changes); return data; } catch (error) { console.log('Error al actualizar en la Api:', error); throw new Error('No se pudo actualizar el producto en el servidor'); } } async create(dto: CreateProductDto) { const { data } = await axios.post(this.url, dto); return data; } async findOne(id: Product['id']) { const { data } = await axios.get(`${this.url}/${id}`); return data; } } // Aplicación // 03-main.ts import { ProductHttpService } from './services/product-http.service'; (async () => { const productService = ProductHttpService.getInstance(); console.log('--'.repeat(10)); console.log('getAll'); const products = await productService.getAll(); console.log(products.length); console.log(products.map((item) => item.price)); const productId = products[0]?.id as number; console.log('--'.repeat(10)); console.log('update'); await productService.update(productId, { price: 10000, title: 'Nuevo Producto', description: 'Nueva descripción.', }); console.log('--'.repeat(10)); console.log('find'); const product = await productService.findOne(productId); console.log(product); })();
excelente clase
No necesariamente es bueno utilizar la arquitectura Singleton para cada servicio de una aplicación. El patrón de diseño Singleton se utiliza cuando se desea asegurar que solo haya una instancia de una clase en toda la aplicación. Sin embargo, su uso excesivo puede llevar a acoplamientos fuertes y dependencias globales, lo que puede dificultar el mantenimiento, pruebas y escalabilidad del código.
Servicios con el patron Singleton . product-http-service.ts
import axios from 'axios'; import { UpdateProductDto, CreateProductDto } from '../dtos/product.dto'; import { ProductService } from '../models/product-service.model'; import { Product } from '../models/product.model'; export class ProductHttpService implements ProductService { private static instance: ProductHttpService; private url = 'https://api.escuelajs.co/api/v1/products'; private constructor() { // Constructor privado para evitar instanciación externa } static getInstance(): ProductHttpService { if (!ProductHttpService.instance) { ProductHttpService.instance = new ProductHttpService(); } return ProductHttpService.instance; } async getAll() { const { data } = await axios.get<Product[]>(this.url); return data; } async update(id: Product['id'], changes: UpdateProductDto) { const { data } = await axios.put(`${this.url}/${id}`, changes); return data; } async create(dto: CreateProductDto) { const { data } = await axios.post(this.url, dto); return data; } async findOne(id: Product['id']) { const { data } = await axios.get(`${this.url}/${id}`); return data; } }
. product-memory-service.ts
import { faker } from '@faker-js/faker'; import { Product } from '../models/product.model'; import { CreateProductDto, UpdateProductDto } from '../dtos/product.dto'; import { ProductService } from '../models/product-service.model'; export class ProductMemoryService implements ProductService { private static instance: ProductMemoryService; private products: Product[] = []; private constructor() { // Constructor privado para evitar instanciación externa } static getInstance(): ProductMemoryService { if (!ProductMemoryService.instance) { ProductMemoryService.instance = new ProductMemoryService(); } return ProductMemoryService.instance; } getAll() { return this.products; } create(data: CreateProductDto): Product { const newProduct = { ...data, id: faker.number.int(), category: { id: data.categoryId, name: faker.commerce.department(), image: faker.image.url(), }, }; return this.add(newProduct); } add(product: Product) { this.products.push(product); return product; } update(id: Product['id'], changes: UpdateProductDto): Product { const index = this.products.findIndex((item) => item.id === id); const prevData = this.products[index]; this.products[index] = { ...prevData, ...changes, }; return this.products[index]; } findOne(id: Product['id']) { return this.products.find((item) => item.id === id); } }
Con el try catch nos permite seguir utilizando la aplicación, por lo regular cuando salta un error el programa se detiene.
Insomnia es una herramienta interesante que funciona similar a Postman .