Consumiendo ProductHttpService

Clase 20 de 25 • Curso de TypeScript: Programación Orientada a Objetos y Asincronismo

Miguel Angel Reyes Moreno

student•

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.

Cesar More Sanchez

student•

Excelente! Muchas gracias!

Ronaldo Delgado

student•

Genial!

Katerin Calderón

student•

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.

Ivan Sangueza Alarcon

student•

https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client

Santiago Andres Alvarez Cuadros

student•

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 {}

Max Andy Diaz Neyra

student•

excelente aporte

Manuel Cabos

student•

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:

✅ Enviando la propiedad image
❌ No enviando la propiedad image

Bruno Balzarelli

student•

Intente hacer lo mismo que vos, y a mi me sigue dando error 500

Manuel Cabos

student•

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.

Luis Angel Flores Galindo

student•

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

Walter Omar Barrios Vazquez

student•

Una opción para visualizar el mensaje de error en el catch:

  }catch(err:any) {
    console.error(err.response.data);
  }

Ivan David Martinez Baron

student•

¿Por que Typescript no me alerta al usar las funciones del productService al no usar await?

Diego Raciel Ortega Hernandez

student•

Por que no da un error como tal. Simplemente congela la aplicación hasta que se haya completado el proceso.

Andre Huaman Yovera

student•

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.

Fabian Andres Parra Sanchez

student•

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;
  }
}

David Rangel

student•

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);
})();

Ronaldo Delgado

student•

excelente clase

Gerardo Alberto Soto Alvarez del Castillo

student•

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.

Andre Huaman Yovera

student•

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);
  }
}

Diego Raciel Ortega Hernandez

student•

Con el try catch nos permite seguir utilizando la aplicación, por lo regular cuando salta un error el programa se detiene.

Elioenai Garcia

student•

Insomnia es una herramienta interesante que funciona similar a Postman .

https://insomnia.rest/download

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...
}

const productService = ProductHttpService.getIntance();
const productService1 = ProductHttpService.getIntance();

console.log(productService === productService1); // debe ser true para indicar que es la misma instancia

export class ProductFetch{
	private static instance: ProductFetch;
 	 private constructor() {}
	  public static getIntance(): ProductFetch {
  	  if (!ProductFetch.instance) ProductFetch.instance = 	new ProductFetch();
    return ProductFetch.instance;
  }
}

// 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);
})();

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;
  }
}

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);
  }
}

Consumiendo ProductHttpService

Introducción

¿Ya tomaste el Curso de TypeScript: Tipos Avanzados y Funciones?

Fundamentos de POO

Class

Métodos

Acceso público

Acceso privado

Constructor

Getters

Setters

POO Avanzada

Herencia

Acceso protegido

Static

Interfaces

Clases abstractas

Singleton: constructor privado

Asincronismo y consumo de APIs

Promesas

Tipando respuestas HTTP

Proyecto: migración de funciones a clases

Consumiendo ProductMemoryService

ProductHttpService

Consumiendo ProductHttpService

Genéricos

Generics

Generics en clases

Generics en métodos

Decoradores

Próximos pasos

¿Quieres más cursos de TypeScript?