Clase 4 Intermedio | 19/02/2025

Programación asíncrona

Author: mouredev

Intermediate/07-async.js

@@ -0,0 +1,154 @@
+/*
+Clase 4 - Programación asíncrona (19/02/2025)
+Vídeo: https://www.twitch.tv/videos/2385650388?t=00h22m48s
+*/
+
+// Programación asíncrona
+
+// Código síncrono
+
+console.log("Inicio")
+
+for (let i = 0; i < 100000000; i++) { }
+
+console.log("Fin")
+
+// Event Loop (Bucle de eventos)
+
+// Componentes del Event Loop:
+// 1. Call Stack (Pila de ejecución)
+// 2. Web APIs (APIs del navegador) o Node.js:
+// 3. Task Queue (setTimeout()) y Microtask Queue (Promesas)
+
+// Flujo del Event Loop:
+// 1. Call Stack
+// 2. Operaciones asíncronas -> Web APIs o Node.js
+// 3. Operación termina -> La coloca en Task Queue o Microtask Queue
+// 4. Si Call Stack vacío -> Mueve tareas del Microtask Queue o Task Queue al Call Stack
+// 5. El proceso se repite
+
+// Código asíncrono
+
+// - Callbacks
+
+console.log("Inicio")
+
+setTimeout(() => {
+    console.log("Esto se ejecuta después de 2 segundos")
+}, 2000)
+
+console.log("Fin")
+
+// - Problema: Callback Hell
+
+function step1(callback) {
+    setTimeout(() => {
+        console.log("Paso 1 completado")
+        callback()
+    }, 1000)
+}
+
+function step2(callback) {
+    setTimeout(() => {
+        console.log("Paso 2 completado")
+        callback()
+    }, 1000)
+}
+
+function step3(callback) {
+    setTimeout(() => {
+        console.log("Paso 3 completado")
+        callback()
+    }, 1000)
+}
+
+step1(() => {
+    step2(() => {
+        step3(() => {
+            console.log("Todos los pasos completados")
+        })
+    })
+})
+
+// - Promesas
+
+const promise = new Promise((resolve, reject) => {
+    // IMPORTANTE: Inicialmente escribí setInterval, pero lo correcto es setTimeout
+    // setInterval se ejecutaría indefinidamente cada 4s, y el proceso nunca finalizaría
+    setTimeout(() => {
+        const ok = false
+        if (ok) {
+            resolve("Operación exitosa")
+        } else {
+            reject("Se ha producido un error")
+        }
+    }, 4000)
+})
+
+promise
+    .then(result => {
+        console.log(result)
+    })
+    .catch(error => {
+        console.log(error)
+    })
+
+// - Encadenamiento de promesas
+
+function step1Promise() {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            console.log("Paso 1 con promesa completado")
+            resolve()
+        }, 1000)
+    })
+}
+
+function step2Promise() {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            console.log("Paso 2 con promesa completado")
+            resolve()
+        }, 1000)
+    })
+}
+
+function step3Promise() {
+    return new Promise(resolve => {
+        setTimeout(() => {
+            console.log("Paso 3 con promesa completado")
+            resolve()
+        }, 1000)
+    })
+}
+
+step1Promise()
+    .then(step2Promise)
+    .then(step3Promise)
+    .then(() => {
+        console.log("Todos los pasos con promesa completados")
+    })
+
+// - Async/Await
+
+function wait(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+async function process() {
+
+    console.log("Inicio del proceso")
+
+    await wait(5000)
+    console.log("Proceso después de 5 segundos")
+
+    await wait(1000)
+    console.log("Proceso después de 1 segundo")
+
+    await wait(2000)
+    console.log("Proceso después de 2 segundos")
+
+    console.log("Fin del proceso")
+}
+
+process()

Intermediate/08-async-exercises.js

@@ -0,0 +1,50 @@
+/*
+Clase 4 - Programación asíncrona (19/02/2025)
+Vídeo: https://www.twitch.tv/videos/2385650388?t=00h22m48s
+*/
+
+// 1. Crea una función para saludar que reciba un nombre y un callback. 
+//    El callback debe ejecutarse después de 2 segundos y mostrar en consola "Hola, [nombre]".
+
+// 2. Crea tres funciones task1(callback), task2(callback) y task3(callback). 
+//    Cada función debe tardar 1 segundo en ejecutarse y luego llamar al callback.
+
+// 3. Crea una función para verificar un número que retorne una Promesa. 
+//    Si el número es par, la promesa se resuelve con el mensaje "Número par". 
+//    Si el número es impar, la promesa se rechaza con el mensaje "Número impar".
+
+// 4. Crea tres funciones que devuelvan promesas:
+//    firstTask(): tarda 1s y muestra "Primera tarea completada".
+//    secondTask(): tarda 2s y muestra "Segunda tarea completada".
+//    thirdTask(): tarda 1.5s y muestra "Tercera tarea completada".
+
+// 5. Transforma el ejercicio anterior de Promesas en una función async/await llamada executeTasks().
+
+// 6. Crea una función getUser(id) que devuelva una promesa y simule una llamada a una API (que se demore 2s).
+//    Si el id es menor a 5, la promesa se resuelve con { id, nombre: "Usuario " + id }.
+//    Si el id es 5 o mayor, la promesa se rechaza con el mensaje "Usuario no encontrado".
+//    Usa async/await para llamar a getUser(id) y maneja los errores con try/catch.
+
+// 7. Intenta predecir el resultado de este código antes de ejecutarlo en la consola:
+//    console.log("Inicio")
+//    setTimeout(() => console.log("setTimeout ejecutado"), 0)
+//    Promise.resolve().then(() => console.log("Promesa resuelta"))
+//    console.log("Fin")
+
+// 8. Crea tres funciones que devuelvan promesas con tiempos de espera distintos.
+//    A continuación, usa Promise.all() para ejecutarlas todas al mismo tiempo y mostrar "Todas las promesas resueltas" cuando terminen.
+
+// 9. Crea una función waitSeconds(segundos) que use setTimeout dentro de una Promesa para esperar la cantidad de segundos indicada.
+//    A continuación, usa async/await para que se espere 3 segundos antes de mostrar "Tiempo finalizado" en consola.
+
+// 10. Crea una simulación de un cajero automático usando asincronía.
+//     - La función checkBalance() tarda 1s y devuelve un saldo de 500$.
+//     - La función withdrawMoney(amount) tarda 2s y retira dinero si hay suficiente saldo, o devuelve un error si no hay fondos.
+//     - Usa async/await para hacer que el usuario intente retirar 300$ y luego 300$ más.
+//     
+//     Posible salida esperada:
+//     Saldo disponible: 500$
+//     Retirando 300$...
+//     Operación exitosa, saldo restante: 200$
+//     Retirando 300$...
+//     Error: Fondos insuficientes

README.md

@@ -15,8 +15,8 @@
 
 ### Curso de fundamentos intermedio (continuación del desde cero). Nueva clase cada semana.
 
-#### 🔴 PRÓXIMA CLASE EN DIRECTO: Miércoles 19 de febrero a las 20:00h (España) en [Twitch](https://twitch.tv/mouredev) y [YouTube](https://youtube.com/@mouredev)
-#### 🗓️ CONSULTA EL HORARIO POR PAÍS Y CREA UN RECORDATORIO desde [Discord](https://discord.gg/umXned72?event=1339346133624946889)
+#### 🔴 PRÓXIMA CLASE EN DIRECTO: Miércoles 26 de febrero a las 20:00h (España) en [Twitch](https://twitch.tv/mouredev) y [YouTube](https://youtube.com/@mouredev)
+#### 🗓️ CONSULTA EL HORARIO POR PAÍS Y CREA UN RECORDATORIO desde [Discord](https://discord.gg/DuE3fHyV?event=1341887890858442772)
 
 * Clase 1 [29/01/2025] - Funciones avanzadas
 	* [Vídeo](https://www.twitch.tv/videos/2367024319?t=00h08m45s)
@@ -34,6 +34,11 @@
 	* [Código Clases](./Intermediate/05-advanced-classes.js)
 	* [Ejericios](./Intermediate/06-advanced-objects-classes-exercises)
 
+* Clase 4 [19/02/2025] - Programación asíncrona
+	* [Vídeo](https://www.twitch.tv/videos/2385650388?t=00h22m48s)
+	* [Código](./Intermediate/07-async.js)
+	* [Ejericios](./Intermediate/08-async-exercises.js)
+
 ## Clases en vídeo
 
 ### Curso de fundamentos desde cero