Promesas
Clase 15 de 25 • Curso de TypeScript: Programación Orientada a Objetos y Asincronismo
Contenido del curso
Fabián Ardila
student•
hace 4 años
Josue Cerron Tuesta
student•
hace 3 años
Gabriel Cordero
student•
hace 3 años
Clase 15 de 25 • Curso de TypeScript: Programación Orientada a Objetos y Asincronismo
Contenido del curso
Fabián Ardila
Josue Cerron Tuesta
Gabriel Cordero
Axel Enrique Galeed Gutierrez
Max Andy Diaz Neyra
Miguel Angel Reyes Moreno
Josue Cerron Tuesta
Miguel Angel Reyes Moreno
Oscar Mauricio Acevedo Porras
Iván Gutiérrez
Alejandro Chavez
Jason Francisco Macas Mora
Ariel Esteban Romero Garcia
Dario Mendoza
Bryan Key
David Barrera
Cesar More Sanchez
Andrés Felipe Eslava Zuluaga
Reinaldo Mendoza
Justin Davila
Dario Mendoza
Cristian Ignacio Zuñiga Medina
Rodrigo Ramos Xochiteotzin
Andre Huaman Yovera
Cindy Tatiana Montoya Leal
Andrés Felipe Eslava Zuluaga
Ulqernesh Karvenae
German Pinto
Diego Raciel Ortega Hernandez
El API en texto que se debe consumir es este:
https://api.escuelajs.co/api/v1/products
Heroe sin capa!
muchas gracias
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; }
Gran aporte!!
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) })()
Excelente bro!
No se pronuncia 'asainc', se pronuncia 'eisinc'
Tienes razón, pero si vieras el nivel de inglés de los contractors de las empresas xd
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/
Ya fetch es parte de node :heart:
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);
En dónde puedo mirar como se desarrollo la documentación con Swagger?
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.
Update: Node.js tiene soporte para Fetch API desde la versión 18.0.0, publicada en abril de 2022.
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?
No es obligatorio, al profe se le olvidó quitarlo nomas.
++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' ] }, ...
En node v17+ fetch esta disponible como opción experimental
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
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.
Me pregunto cual sera la herramienta que usa el profe para ordenar asi la respuesta de la api
¿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?
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:
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:
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:
. 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!
El api.escuelajs ya no existe :/
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) })();
esos Genericos no lo vimos en Fundamentos ni en Tipos Avanzados
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