Contenido del curso
Fundamentos de POO
POO Avanzada
Asincronismo y consumo de APIs
Genéricos
Próximos pasos
Promesas
Contenido del curso
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
Aunque javascript maneja de forma natural el asincronismo por medio de promesas o callbacks, esta clase versa sobre cómo usar asincronismo con typescript , en esta clase usaremos básicamente promesas y las palabras claves reservadas async y await, vamos a ver como la soportamos y cual seria el tipado correcto en typescript.
Para trabajar con asincronismo vamos a instalar axios. ¿Que es Axios?,
En el browser nosotros tenemos una pi llamada fetch pero en node lo hacemos de forma diferente porque fetch no es parte de node Axios nos va a servir para los dos, es decir: para hacer peticiones tanto en el browser como en node. 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.
Procedemos a instalarlo con npm, de la siguiente manera
npm install Axios
el constructor de Promise recibe una función que a su ves recibe dos parametros, resolve y reject
Antes de analizar el codigo que ilustra que hace y como se implementa una promesa me gustaria definirla:
Según chatGPT una promesa es: una promesa en JavaScript/TypeScript es un objeto que representa el resultado de una operación que todavía no termina, pero que terminará después.
Mi reflexión: Cuando lo que estamos ejecutando corre en una sola computadora o sistema, es posible saber que cada línea se ejecutará antes de la línea que sigue pero si suponemos que necesitamos ejecutar una rutina que va a correr en otro equipo, por ejemplo una base de datos en un servidor remoto, solo podemos mandar una solicitud a dicho servidor pero solo el sabe cuanto se tardara en respondernos pero mientras lo hace, nuestra aplicación seguirá corriendo y este es un problema potencial porque es posible que nuestra aplicación local de por hecho que ya se ejecuto el codigo en el servidor y que tal vez nos entregó un resultado que intentamos usar pero que aun no tenemos y obtengamos algún error, es ahi donde una promesa se hace necesaria, es una forma de esperar el resultado hasta que llegue, con las palabras clave async y await es posible simular un comportamiento secuencial en el cual el código es capaz de esperase hasta que se obtenga la respuesta esperada o al menos un error manejable. veamos un código de ejemplo:
(
async ()=>{
function delay(time:number=3000){
const promise = new Promise((resolve)=>{
setTimeout(()=>{resolve(true)},time)
})
return promise
}
console.log("-".repeat(30))
const rta = await delay()
console.log(rta)
}
)()
En la segunda línea declaramos una función anónima con la palabra clave async lo cual significa que el código que se ejecutara no corre precisamente de manera secuencial sino que hay líneas de código que tomara un tiempo indeterminado, la función delay se toma 3 segundos o lo que le indicamos, en ella hay una promesa declarada en la línea 4, la promesa es el objeto en el que se ejecutara el proceso y por medio de el se puede tener acceso a lo que resulte de dicho proceso, guardamos ese objeto en una constante llamada promise que es lo que se devuelve al final. En la décima línea se ejecuta la promesa, la palabra await es algo así como decirle al código, esperate aquí hasta que tengas algo que devolver y después te sigues ejecutando el resto En la linea 7 vemos que la función delay regresa el objeto promise (Declarado anteriormente), pero puesto que no se ha declarado su tipo ts no lo sabe (Por que no se ha indicado) que tipo de valor regresará la función delay si bien es cierto que sabemos que regresa promise, falta especificar el tipo de valor que trae promise, si pasaramos el apuntador del mouse sobre la septima linea veríamos que code nos indica que promise es unknow
promise<unknow>
Nota: Es importante recalcar que en la novena línea, donde se aplica el await y se resuelve la promesa en ese momento deja de ser promesa ahora por fin tenemos el valor que lleva dentro, es algo asi como quitarle el cascarón de promesa y quedarnos con lo que está dentro,
en nuestro caso, en la quinta línea vemos que la promesa resuelve un boleano (true) pero no esta indicado ¿Como podemos indicarlo?, Respuesta: En la cuarta línea usamos un <u>argumento de tipo genérico</u> <boolean> y en lugar de declararlo así
const promise = new Promise((resolve)=>{
lo declaramos así
const promise = new Promise<boolean>((resolve)=>{ Si volviéramos a pasar el cursor sobre la septima linea ahora veriamos que su tipo es
promise<boolean>
Si cambiaramos el tipo como string const promise = new Promise<string>((resolve)=>{ y volviéramos a pasar el cursor sobre la séptima línea en vs code ahora veríamos que su tipo es string.
En la vida real, casi nunca se tiene una promesa que resuelva un valor tan directamente sino que casi siempre se usa llamando a una librería externa, es aqui donde usaremos axios
agreguemos una funcion a nuestro codigo
(
async ()=>{
function delay(time:number=3000){
const promise = new Promise<boolean>((resolve)=>{
setTimeout(()=>{resolve(true)},time)
})
return promise
}
function getProducts(){
const promise = axios.get("https://api.escuelajs.co/api/v1/users")
return promise
}
console.log("-".repeat(30))
const rta = await delay()
console.log(rta)
console.log("-".repeat(30))
const products = await getProducts()
console.log(products.data)
}
)()
Listo, hemos agregado la función getProducts, en la doceava línea asignamos el valor devuelto por el método get de axios (que recibe una url) a la constante promise esa funcion al usar el metodo get se convierte en una promesa automáticamente la cual ejecutamos en la linea 18 usando la palabra clave await para esperar a que la promesa nos devuelva el valor
hay otra forma de escribir la función, toma en cuenta que cualquier funcion declarada como async, reforma una promesa (
async ()=>{
function delay(time:number=3000){
const promise = new Promise<boolean>((resolve)=>{
setTimeout(()=>{resolve(true)},time)
})
return promise
}
function getProducts(){
const promise = axios.get("https://api.escuelajs.co/api/v1/users")
return promise
}
async function getProductsAsync(){
const rta = await axios.get("https://api.escuelajs.co/api/v1/users")
return rta.data
}
console.log("-".repeat(30))
const rta = await delay()
console.log(rta)
console.log("-".repeat(30))
const products = getProducts()
console.log("-".repeat(30))
console.log(products.data)
const products = await getProductsAsync()
console.log(products) // No es necesaria la data por que ya la devolvio getProductsAsync
}
)()
Se declaró getProductsAsync como async y como el método get es una promesa le agregamos await con esto ya no tendremos que agregar el await al asignar el valor devuelto por getProductsAsync
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