Promesas

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

Fabián Ardila

student•

El API en texto que se debe consumir es este:

https://api.escuelajs.co/api/v1/products

Josue Cerron Tuesta

student•

Heroe sin capa!

Gabriel Cordero

student•

muchas gracias

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes. :D

Axios

Es una forma interesante de hacer request y conectarnos a servicios web, nos va a servir para hacer peticiones desde el frontend como en el backend.

Asincronismo y TypeScript

Podemos correr promesas y código asíncrono con TypeScript de la misma forma que lo haríamos con JavaScript.

Tipado y promesas

En el caso de no colocar el tipo de dato de retorno de nuestra función asíncrona, TypeScript supondrá que es una promesa, pero no sabe el tipo de dato que retorna esa promesa.

Podemos tipar a una promesa con genéricos

const variableName = new Promese<dataType>(...);

Fetch con NODE v18

Podemos utilizar nodejs para poder realizar peticiones fetch pero solo lo podemos hacer con la versión 18, es una feature no estable así que puede tener sus errores.

Ejemplo en base al código de la clase

async function getProductsFetch () {
    const promise = await fetch('https://api.escuelajs.co/api/v1/products');
    const rta = await promise.json();
    return rta;
}

Max Andy Diaz Neyra

student•

Gran aporte!!

Miguel Angel Reyes Moreno

student•

Una mejor manera (a mi parecer) de escribir la función de async await es usando la destructuración de objetos sabiendo qué vamos a extraer de la respuesta:

import axios from "axios"

(async() => {
  async function getProducts() {
    const { data } = await axios.get('https://api.escuelajs.co/api/v1/products')
    return data
  }

  const products = await getProducts()
  console.log(products)
})()

Josue Cerron Tuesta

student•

Excelente bro!

Miguel Angel Reyes Moreno

student•

No se pronuncia 'asainc', se pronuncia 'eisinc'

Oscar Mauricio Acevedo Porras

student•

Tienes razón, pero si vieras el nivel de inglés de los contractors de las empresas xd

Iván Gutiérrez

student•

En los comentarios ya está el nuevo link que hay que usar <3, pero si quieren explorar más esa api, hay un nuevo diseño y cositas geniales que se han desarrollado https://fakeapi.platzi.com/

Alejandro Chavez

student•

Ya fetch es parte de node :heart:

Jason Francisco Macas Mora

student•

Aquí una forma más elegante de declarar un delay. Es similar al time.sleep de Python. Yo lo uso en algunos de mis proyectos:

const sleep = async(delay: number) => {
    await new Promise((resolve) => setTimeout(resolve, delay));
  }

await sleep(1000);

Ariel Esteban Romero Garcia

student•

En dónde puedo mirar como se desarrollo la documentación con Swagger?

Brahyan Antonio Martinez Madera

student•

https://api.escuelajs.co/docs/#/

David Barrera

student•

En la v2 del get product, si ya dentro de la funcion getProductsAsync tenemos un await para luego obtener el valor de la promesa ¿Por qué llamamos de nuevo el await en la ejecución de la función? en const productsv2 = ++await ++ getProductsAsync ¿Cuál es la función de ese await?

Cesar More Sanchez

student•

No es obligatorio, al profe se le olvidó quitarlo nomas.

Andrés Felipe Eslava Zuluaga

student•

++Es necesario para que se resuelva la promesa.++

. . Si lo dejas asi:

  async function getProductsAsync() {
    const response = await axios.get('https://api.escuelajs.co/api/v1/products');
    return response.data; // escribir 'async' deja que la responsabilidad de resolver la promesa lo realice la función
  }
  console.log('>>'.repeat(10));
  const productsAsync = getProductsAsync();
  console.log(productsAsync);

La respuesta que tienes será:

>>>>>>>>>>>>>>>>>>>>
Promise { <pending> }

Esto ocurre porque literalmente no está esperando a que se resuelva dicha promesa; solo te loggea el estado de la promesa. La palabra reservada await hace que se resuelva y cambie el estado a fulfilled (que significa que la promesa está resuelta y tiene el valor del resultado) .

La forma correcta es como el profesor lo dejó expresado en el código

async function getProductsAsync() {
    const response = await axios.get('https://api.escuelajs.co/api/v1/products');
    return response.data;
  }
  console.log('>>'.repeat(10));
  const productsAsync = await getProductsAsync();
  console.log(productsAsync);

respuesta:

...,
{
    id: 102,
    title: 'Unbranded Rubber Ball',
    price: 170,
    description: 'The beautiful range of Apple Naturalé that has an exciting mix of natural ingredients. With the Goodness of 100% Natural Ingredients',
    category: {
      id: 2,
      name: 'Electronics',
      image: 'https://api.lorem.space/image/watch?w=640&h=480&r=3559'
    },
    images: [
      'https://api.lorem.space/image/watch?w=640&h=480&r=7010',
      'https://api.lorem.space/image/watch?w=640&h=480&r=9585',
      'https://api.lorem.space/image/watch?w=640&h=480&r=4512'
    ]
  },
  {
    id: 103,
    title: 'Licensed Fresh Bacon',
    price: 309,
    description: "Boston's most advanced compression wear technology increases muscle oxygenation, stabilizes active muscles",
    category: {
      id: 3,
      name: 'Furniture',
      image: 'https://api.lorem.space/image/furniture?w=640&h=480&r=9052'
    },
    images: [
      'https://api.lorem.space/image/furniture?w=640&h=480&r=5017',
      'https://api.lorem.space/image/furniture?w=640&h=480&r=8243',
      'https://api.lorem.space/image/furniture?w=640&h=480&r=9287'
    ]
  },
...

Reinaldo Mendoza

student•

En node v17+ fetch esta disponible como opción experimental

Justin Davila

student•

Con console.time() y console.timeEnd() podemos saber exactamente cuanto tiempo tarda en ejecutarse un proceso asíncrono. Aquí un ejemplo:

  console.time('delay')
  const rta = await delay(5000);
  console.log(rta);
  console.timeEnd('delay')

y la salida de mi consola: true inicio: 5.018s

Dario Mendoza

student•

Axios es una biblioteca de JavaScript que permite realizar solicitudes HTTP desde el navegador o Node.js. Facilita la comunicación con APIs al proporcionar una interfaz simple y promesas para manejar respuestas. Puedes enviar solicitudes GET, POST, PUT y DELETE, y también maneja la conversión automática de datos JSON. A diferencia de la API Fetch, Axios ofrece algunas características adicionales, como la cancelación de solicitudes y la configuración sencilla de interceptores. Es ampliamente utilizada en proyectos que requieren interacción con servicios RESTful.

Dario Mendoza

student•

Las promesas en JavaScript son objetos que representan la eventual conclusión (o falla) de una operación asíncrona. Estas permiten manejar el flujo de programación asincrónica de manera más legible y estructurada. Una promesa puede estar en uno de tres estados: pendiente, cumplida (fulfilled) o rechazada (rejected). Cuando se cumple, puedes usar .then() para manejar el resultado, y si se rechaza, puedes usar .catch() para manejar el error. Este enfoque mejora la legibilidad del código en comparación con el uso de callbacks anidados.

Cristian Ignacio Zuñiga Medina

student•

Me pregunto cual sera la herramienta que usa el profe para ordenar asi la respuesta de la api

Rodrigo Ramos Xochiteotzin

student•

¿Cómo puedo generar la documentación de una API así? Sé que FastAPI para Python lo hace automáticamente... ¿hay algo así con js/ts?

Andre Huaman Yovera

student•

Sí, en JavaScript/TypeScript también hay herramientas disponibles para generar documentación automática de una API. Una de las opciones más populares es Swagger (también conocido como OpenAPI), que proporciona un estándar para describir APIs RESTful. . Existen varias bibliotecas y herramientas que te permiten generar la documentación de tu API en base a las especificaciones de Swagger/OpenAPI. A continuación, te mencionaré algunas de las opciones más comunes: .

Swagger UI: Es una interfaz de usuario que muestra la documentación de una API basada en las especificaciones de Swagger/OpenAPI. Puedes agregar comentarios y anotaciones en tu código fuente usando las convenciones de Swagger/OpenAPI, y Swagger UI generará automáticamente la documentación interactiva. Puedes encontrar más información en: https://swagger.io/tools/swagger-ui/
Swagger-jsdoc: Es una biblioteca que te permite generar automáticamente especificaciones de Swagger/OpenAPI a partir de comentarios JSDoc en tu código fuente JavaScript/TypeScript. Puedes documentar tus rutas, parámetros, respuestas, etc., directamente en el código y luego generar la documentación con Swagger UI. Aquí tienes un enlace a la biblioteca: https://github.com/Surnet/swagger-jsdoc
TypeDoc: Si estás trabajando con TypeScript y quieres generar documentación en formato HTML para tu API, puedes utilizar TypeDoc. Esta herramienta crea una documentación basada en tus archivos TypeScript y anotaciones JSDoc. Puedes encontrar más información en: https://typedoc.org/

. Recuerda que debes seguir las convenciones y estructuras de Swagger/OpenAPI para documentar correctamente tu API. Esto incluye describir los endpoints, los parámetros, los esquemas de datos, las respuestas, etc. Utilizar estas herramientas te ayudará a mantener tu documentación actualizada automáticamente a medida que realizas cambios en tu API. . Espero que esta información te sea útil. ¡Buena suerte con la documentación de tu API!

Cindy Tatiana Montoya Leal

student•

El api.escuelajs ya no existe :/

Andrés Felipe Eslava Zuluaga

student•

https://api.escuelajs.co/docs/

Bryan Key

student•

Update: Node.js tiene soporte para Fetch API desde la versión 18.0.0, publicada en abril de 2022.

Ulqernesh Karvenae

student•

con fetch, el slice es solo para obtener una parte de la data pa evitarme el scroll

(async () => {
  function delay(time: number) {
    const promise = new Promise<boolean>((resolve) => {
      setTimeout(() => {
        resolve(true)
      }, time)
    });
    return promise
  }

  const getProducts = async () => {
    const promise = await fetch('https://api.escuelajs.co/api/v1/products')
    const data = await promise.json()

    console.log(data.slice(0,2))
  }
  getProducts()
  const rts = await delay(3000)
  console.log(rts)
})();

German Pinto

student•

esos Genericos no lo vimos en Fundamentos ni en Tipos Avanzados

Diego Raciel Ortega Hernandez

student•

Woooah estaba viendo documentación de librerías con TS y en algun momento vi que se le pasaban "parámetros" a las interfaces asi: <T> y pensé ¿Esto que es? resulta que eran Genericos :0