Async Await

Es importante tener en cuenta la diferencia entre las promesas y async await. Porque se encargan de lo mismo, la asíncronia, pero de distinta manera. Por ello te dejo un recurso que te puede ayudar para entender esto. Las promesas y async await, lógicamente, no son iguales

Hice el ejercicio simulando una venta de helados.

// Async Await
const prepareIceCream = (money) => {
    return new Promise((resolve, reject) => {
        if(money >= 500) {    
            console.log('We are preparing your Ice cream...')
            setTimeout(() => {
                resolve('Here you are a Chocolate Ice cream');
            }, 6000);  //3. Si el dinero que ingresaste es mayor o igual a 500, entonces te preparamos el helado. El proceso toma 6 segundos.
        } else {
            reject('Sorry! You do not have enough money :('); //3. Si el dinero es menor a 500, lo sentimos, no te alcanza
        }
    });
}

const buyIceCream = async (money) => { 
    try{
        console.log('Welcome to Ice Cream World!');
        const result = await prepareIceCream(money); //2. Esperas aquí mientras envíamos el dinero, lo verifican y te preparan el helado 
        console.log(result); //4. Imprimimos tu pedido! si todo salió bien.
        console.log('Thanks for your purchase!');
    } catch(e) {
        console.log(e); //4. Te decimos que no salió bien el proceso porque tu dinero no es suficiente.
    }
}

buyIceCream(600); //1. llamas a la funcion comprar helado e Ingresas el dinero

Un resumen de esta sección Es8.

Si vienes de Python, esto es relativamente fácil

Descripción desde MDN. Me ayudó a entender y reforzar lo del video.

La expresión await provoca que la ejecución de una función async sea pausada hasta que una Promise sea terminada o rechazada, y regresa a la ejecución de la función async después del término. Al regreso de la ejecución, el valor de la expresión await es la regresada por una promesa terminada.

Si la Promise es rechazada, el valor de la expresión await tendrá el valor de rechazo.

Si el valor de la expresión seguida del operador await no es una promesa, será convertido a una resolved Promise.
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/await

Considero que hay muchos detalles en este curso, tomando en cuenta que muchos somos principiantes en JS, tal vez para los que tienen conocimiento previo seguramente será sencillo, valdría mucho la pena hacer curaduría en el contexto del curso, yo tomé el curso con Diego de fundamentos y muchas cosas no se ven allá tampoco y que Óscar usa aquí…

Un ejemplo simple de Async/Await

const delay = () => {
    return new Promise(
        resolve => setTimeout(resolve, 1000)
    )
};
const counter = async() => {
    await delay();
    console.log('one second')
    await delay();
    console.log('two seconds')
    await delay();
    console.log('three seconds')
    await delay();
    console.log('four seconds')
    await delay();
    console.log('five seconds')
};
counter();

RESUMEN:

En esta clase se trabajó Async y await, en el que se usan funciones y promesas para poder ver su comportamiento. Estas permiten ser más claro al crear funciones y trabaja mejor con el asincronismo.
Adjunto el código correspondiente de esta clase:

const helloWorld =() =>{
    return new Promise((resolve,reject)=>{
        (true)
        ? setTimeout(()=>resolve('helloWorld'),3000)
        : reject(new Error ('Test Error'))
    })
}

const helloAsync =async() =>{
    const hello = await helloWorld();
    console.log(hello);

}
helloAsync();

//Nos permitirá usar trycatch y trabajar los errores correctamente.

const another =async() =>{
    try{
        const hello = await helloWorld();
        console.log(hello);

    } catch (error){
        console.log(error);
        
    }
}

another();

Creo que tendré que ver esta clase un par de veces más para que me quede claro del todo, ¿a alguien más le pasa? jeje

Me gusta el Async Await, creo que esto tambien ayudara:
video con Leonidas: https://www.youtube.com/watch?v=E5ENWEcoDdI
video Centripio: https://www.youtube.com/watch?v=USuhP9F56UE

Hace un mes que termine el curso de asincronismo y parece que olvide todo 😭

Para entender mejor la diferencia entre Async/Await y Promise, he hecho un pequeño ejercicio

/*Simulando el ingreso a una App que mide si he estado haciendo ejercicio,
  al ingresar me debería mostrar mi usuario y despues darme un mensaje sobre si he estado ejercitando o no
*/

//este es el usuario
let usuario = {name: 'Paula', lastname: 'Uzcategui', ejercito: false};


//Una funcion para que se carguen los datos del usuario, pongamos que esto tarda 5 segundos
const ingresar = () =>{
    return new Promise((resolve, reject)=>{
        if(true){
            setTimeout(() =>resolve(`Usuario ${usuario.name} ${usuario.lastname}`),5000);
        }
        else{
            reject ('No se encontraron los datos');
        }
    })
}

// Una función para mostrar un mensaje al usuario dependiendo si se ejercitó o no. pongamos que esto tarda 3 segundos
const mensaje = () =>{
    return new Promise((resolve, reject)=>{
        if(usuario.ejercito){
         setTimeout(()=> resolve ("Veo que hiciste ejercicio :D"), 3000);
        }
        else{
            setTimeout(()=> resolve ("Veo que no hiciste ejercicio :O"), 3000);
        }
    })
}

Con Promise

/*Si lo hacemos con Promise, me va a salir el mensaje ANTES que los datos del usario
Esto porque promise es totalmente asincrono y la ejecucuion de mensaje() tarda menos (3 segundos) 
que la ejecución de ingresar() (5 segundos) */
ingresar()
.then(console.log("Entre a la app"))
.then(response => console.log(response))
.then( mensaje().then(response => console.log(response)))

/*Output Entre a la app
Veo que no hiciste ejercicio :O
Usuario Paula Uzcategui */

Con Async/Await

/* Si lo hacemos con async funciona mejor. Porque async ejecuta las promesas de forma sincrona. Asi que se va a esperar a que se ejecute
ingresar() y cuando este listo ejecutara mensaje(). Obteniendo el resultado esperado*/
const abriendo = async() => {
    try{
        console.log("Entre a la app")
        const ingreso = await ingresar();
        console.log(ingreso);
        const ofrecimiento = await mensaje();
        console.log(ofrecimiento);
    }
    catch{
        console.log("Error");
    }
}
/* Output Entre a la app
Usuario Paula Uzcategui
Veo que no hiciste ejercicio :O */

abriendo();

En conclusión:
Async / Await es asíncrono pero el codigo en su interior se ejecuta de forma síncrona, de tal manera que se espera a que se complete la promesas creada con await para pasar al siguiente await
Promise trabaja de forma totalmente asincrona, por lo que todos los procesos estarán corriendo simultaneamente.

El if ternario esta super pero super cool!!!

Hay que verla varias veces para entender.

Creo que este curso debería estár programado mucho despues, ya que hay muchas herramientas, funciones, métodos, etc que son de un nivel más avannzado de lo que se ha enseñado en los cursos anteriores, que realmente es solo el Curso Básico de JavaScript. Por ejeemplo de esta clase no entenedí y creo que no sirve de mucho hacer todo lo que hace el profe al pie de la letra sin ni siquiera haber visto conceptos de asincronía…Mi huimilde opinión.

Profundizar en Async

8. Async Await

Les comparto el código de la clase, esta clase me ha hecho volar mi cerebro hasta el espacio, no entiendo casi nada porque en los cursos anteriores no se explican (o no se profundizan) en estos conceptos, creo que hay un vacío en ese sentido en esta parte de la escuela, espero llenar los huecos con los demás cursos.

/Lesson 7: Async Await
const helloWorld = () => {
    return new Promise((resolve, reject) => {
        (true)
        ? setTimeout(() => resolve ('Hello World'), 3000)
        : reject(new Error('Test error'))
    })
};

const helloAsync = async () => {
    const hello = await helloWorld();
    console.log(hello);
};

helloAsync();

const anotherFunction = async () => {
    try {
        const hello = await helloWorld();
        console.log(hello);
    } catch (error) {
        console.log(error);
    }
};

anotherFunction();

mi cabeza va explotar.

//=> async await
const helloWorld = () => {
    return new Promise((resolve, reject)=>{
        (false)
        ? setTimeout(()=> resolve('Hello Juan Carlos'), 3000)
        : reject(new Error('Test Error'))
    });
}
const helloAsync = async () => {
    const hello = await helloWorld();
    console.log(hello);
}
helloAsync()

// asi se ejecuta correctamente una promesa 
const anotherFunction = async () => {
    try {
        const hello = await helloWorld()
        console.log(hello);
    } catch (error) {
        console.log(error);
    }
}
anotherFunction()

Por que c… explica tan rápido?

Falta un poquito más de bases para los estudiantes que no tenemos, ni conocemos las promesas.

Por ejemplo: en ninguna parte explican o muestran cuál es la estructura básica de CallBack, Promises y AsyncAwait, ni cuales son sus componentes mínimos. Simplemente empiezan a escribir y uno debe adivinar qué se debe usar siempre y qué es opcional.

No me lo tomen a mal, pero creo que seria mas fácil aprender todo esto si por ejemplo solo nos dijeran que es lo actual y de todo el código, es decir todas las versiones juntas hasta donde vamos en la actualidad y así no estar viendo lo anterior y lo nuevo, creo que eso al menos a mi, me serviría mas para tener mas clara la forma actual de programar, es solo mi opinión claro. Ejemplo: no entro a un curso de adobe illustrator esperando como funcionaba algo antes y como funciona ahora en la nueva versión, ya que a mi lo único que me interesa es la nueva versión, que opinan compañeros? Ojo… no digo que explique mal… para nada, me gusta mucho como explica, solo les digo mi punto de vista.

Creo que este no me quedo muy bien entendido:(

• Las promesas son valores que no conocemos, es la promesa de que va haber un valor cuando una acción asíncrona suceda y se resuelva.
• Async se asegura de retornar una promesa y de poder usar await.
• await hace una pausa hasta que la promesa se resuelva y su valor lo guarda en una variable

La escuela de javascript esta totalmente desordenada… Vengo de calcular cuadritos y triangulitos y ahora tiran este curso de ECMAScript 6+ asumiendo que ya se saben muchas cosas que aca se ven por primera vez.

Quizas este equivocado, o alguien mas ha notado esto?

Lo mismo es con el curso de PHP con Composer. Se dan muchas cosas por sabidas ya.

Async Await

// ejemplo de async y await ES8

const pintarCuadro = (mecenas) => {
	return new Promise ((resolve, reject) => {
		if(mecenas) {
			console.log("tengo un mecenas que pagará el trabajo");
			setTimeout(() => {
				resolve('Aquí está tu cuadro pintado.');
			}, 3000);
		} else {
			console.log("Sin mecenas no puedo trabajar pues necesito dinero para vivir");
			reject("No puedo pintar el cuadro, no tengo ni para pintura");
		}
	})
}

const pintarCapillaSixtina = async(mecenas) => {
	try {
		console.log("Has llegado al lugar indicado para pintar un cuadro.");
		const result = await pintarCuadro(mecenas);
		console.log(result);
		console.log("Nos vemos en la próxima. Gracias");
	}	catch (error) {
		console.error(error);
	}
}

const myMecenas = true;
pintarCapillaSixtina(myMecenas);

Salida

Has llegado al lugar indicado para pintar un cuadro.
tengo un mecenas que pagará el trabajo
Aquí está tu cuadro pintado.
Nos vemos en la próxima. Gracias

videos super rapidos poco teoriocos

Recuerden que Asyn y Await trabajan de la mano con las Promises

Algo complejo cuando se juntan varios temas espero en poco tiempo dominarlas bien.

Try Catch NO es necesariamente de Async Await, pueden usarlo independientemente, les recomiendo esta documentación: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/try...catch

Bastante bien la clase. Sin embargo imagino que para poder desarrollar profesionalmente voy a tener que profundizar aun mas en async await

https://www.returngis.net/2019/01/async-y-await-en-javascript-con-ecmascript-6/

Esto del asincronismo en JavaScript es un dolor de cabeza. Creo que fue inventado por el mismo diablo. 😩

Como decimos en Colombia, no entendí ni papa!

me perdi con con las Async y Await no las he manejado

Quien diría que las promesas serian ideales para simular los inconvenientes de mi padre al reclamar sus medicamentos 😃

// el señor miguel debe reclamar sus medicamentos, pero para ello debe esperar
// que se le envie una orden de su centro de salud coomeva si esta orden no llega a su correo el señor miguel no puede reclamar sus medicamentos

const reclamarMedicamentos = ( ordenes ) => {
  return new Promise( ( resolve,reject ) => {
    ( ordenes === 'si' ) 
    ? setTimeout ( () => {
      resolve('Buscando sus medicamentos señor miguel')      
    }, 4000)
    : reject(new Error ( 'No podemos entregar sus medicamentos sin una orden' ))
  });
}

const verificarMedicamentos = async (ordenes) => {
  try{
    const result = await reclamarMedicamentos(ordenes)
    console.log(result);
    console.log('Aqui tiene sus medicamentos buen dia');
} catch(error) {
    console.log(error);
  } 
}
verificarMedicamentos('si')

Async / Await hace que el manejo y solució de promesas sea mejor. Se usa Try y Catch para resolver y manejar errores, respectivamente.

Uno de los mejores aportes que se dió a JS, para un adecuado uso del asincronismo.

La declaración de función async define una función asíncrona, la cual devuelve un objeto AsyncFunction.

Es posible definir también funciones asíncronas a través de una expresión de función async.
By: https://mzl.la/2x3Pd2t

si a alguien le sirve, yo me apoyé en este video para entender un poco mas ya que me habían quedado dudas:
https://www.youtube.com/watch?v=E5ENWEcoDdI

Hice este ejemplo validando que una contraseña fuera correcta o incorrecta.

//Async Await
const password = () => {
    return new Promise((resolve, reject) => {
        //if ternario
        (true)
            ? setTimeout(() => resolve('Welcome!!'), 3000)
            : reject(new Error('Sorry, the password is incorrect, please try again'))
    })
};

//estructura basica de Async Await
const passAsync = async () => {
    const message = await password();
    console.log(message);
};
passAsync();

//Async Await con try-catch
const passAsync2 = async () => {
    try {
        const message = await password();
        console.log(message);
    } catch (error) {
        console.log(error);
    }
};
passAsync2();

// Async Await
const helloWorld = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve('Hello World'), 3000)
            : reject(new Error('Test Error'))
    })
};

const helloAsync = async () => {
    const hello = await helloWorld();
    console.log(hello);
}

helloAsync();

const anotherFunction = async () => {
    try {
        const hello = await helloWorld();
        console.log(hello);
    } catch (error) {
        console.log(error);
    }
};

anotherFunction();

*- Ejemplo código 1

*- Ejemplo código 2

parece que estuvo haciendo carreritas todo el curso para acabarlo muy rápido

Aqui hay un poco de documentacion que podria servir de ayuda: Click aqui

No entendí esta clase hasta que investigué de una manera mas profunda la diferencia entre:

• SetTimeout
• Promises
• Event loop
• Cola de tareas
• Cola de mirco tareas
• Como atiende las tareas y micro tareas el event loop de cada explorador.
• Asnyn Await trabajando en conjunto con Promises

Les recomiendo que puedan tomarse el tiempo para entenderlo, en verdad, no importa cuanto demoren en entenderlo principalmente como el event loop atiende cada una de las tareas. Les hará la vida mas facil y empezaran a sentir que van subiendo de nivel como profesionales porque logran entender y encajar un montonde conceptos y partes de código que en algún momento no entendimos.

Async Await me gusta porque hace que el código sea más legible, si las promesas ya resolvían el callback hell, async await resuelven el then hell, el curso de asincronismo hace una excelente explicación de todo esto ^^

Creo que este curso debería estar mucho más adelante en la ruta de aprendizaje. Como principiante no entendí nada la primera vez.

¿WTF " ? " " : " ?

Por si te preguntas el por que se usa un signo ? y : en la promesa son el IF TERNARIO que menciona el profe Oscar.

funciona en tres partes asi:

1. (la condición)

2. ? si es true se ejecuta la lógica o linea de código que este después del signo " ? "

3. : si es false ósea contrario a la condición se ejecuta la lógica o linea de código que este después del signo " : "

Aquí te dejo la documentación MDN por si quieres profundizar : https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Aprendo mas de los comentarios que del video lol jaja

Sigo la ruta de aprendizaje pero esta es la que me me esta costando, hay MUCHAS cosas que no explica o yo soy lento que no entiende, me frustro.

código

/* Object.entries */
const data = {
    frontend: 'Franks',
    backend: 'Jerson',
    design: 'Sharom'
}

const entries = Object.entries(data); //entries as array
console.log(entries);
console.log(entries.length);

/* Object.values */
const data = {
    frontend: 'Franks',
    backend: 'Jerson',
    design: 'Sharom'
}

const values = Object.values(data);
console.log(values);
console.log(values.length);

/* padding */
const str = 'hello';
console.log(str.padStart(7,'hi'));
console.log(str.padEnd(20,'^*'));

/* trailing comma */
const obj = {
    name: 'Franks', //comma here, without errors!!
}

/* async and await */
const helloWorld = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve('Hello, World!'), 3000)
            : reject(new Error('Test Error!'))
    });
};

const helloAsync = async () => {
    const hello = await helloWorld();
    //const hello2 = await helloWorld2(); //more promises 
    console.log(hello);
};
helloAsync(); //response in 3000 miliseconds

/* async and await - another way ( handling errors ) */
const anotherFunction = async () => {
    try {
        const hello = await helloWorld();
        console.log(hello);
    } catch (error){
        console.log(error);
    }
}
anotherFunction();

Un poco de lo que me quedo chequeando el uso de promesas junto con Async Await functions

Basicamente podemos tipo mandar a llamar una Async fuction cuyo await mande a llamar a la promesa, la promesa puede tener several then’s, de esta forma, podemos manejar el codigo asincrono, de una manera un poco mas sincrona. Esto nos da mas control.

De esta forma, el resto de codigo de la funcion Async, no sera ejecutado, hasta que las funciones dentro de la promesa esten listas y sean todas retornadas, dentro del await de la funcion Async. Esto permite que haya un proceso asincrono, un poco mas controlado y organizado.

Para practicar un poco de asincronismo hice la simulación de una coctelería donde con un valor mínimo y máximo genero un número aleatorio con el cual el “cliente” elije una bebida y se la preparan…
Espero les guste 😃

const mostrarMenu = () => {
    let tragos = ['mojito', 'sangria', 'agua de valencia', 'caipirinha', 'caipiroskha'];
    return tragos;
}

const prepararTrago = (plata) => {
    return new Promise ((resolve, reject) => {
        let min = 1;
        let max = 5;
        if(plata >= 7){
            setTimeout(() => console.log('Hola! ¿Qué te gustaría pedir?'), 2000);
            setTimeout(() => {
                const opciones = mostrarMenu();
                console.log(opciones);
                let eleccion = Math.floor(Math.random() * (max - min)) + min;
                if(opciones[eleccion]){
                    console.log(`Perfecto, enseguida te preparamos tu ${opciones[eleccion]}`);
                }
            }, 2000);
            setTimeout(() => resolve('Listo, acá tenes tu pedido.. Que lo disfrutes :)'), 3000);
        } else setTimeout(() => reject(`Lo siento, no te alcanza con ${plata} pesos para pedir un trago :(`), 6000); 
    });
}

const deGira = async (plata) => {
    try{
        const pedir = await prepararTrago(plata);
        console.log(pedir);
    } catch (error) {
        console.log(error);
    }
}

deGira(5);

deGira(10);

Async Await

// ASYNC AWAIT

const helloWorld = () => {
    return new Promise((resolve, reject)=> {
        (true)
        ? setTimeout(()=>resolve ('Hello World'), 3000)
        : reject(new Error ('Test Error'))
    }); 
};

// implementando async con la palabra reservada async
// es una sintaxis mas facil de leer
const helloAsync = async () => {
    const hello = await helloWorld();

    console.log(hello); 
};

helloAsync();


const anotherFunction = async () => {
    //Forma propuesta para capturar los errores corrextamente
    try {
        const hello = await helloWorld();
        console.log(hello);
    } catch (error) {
        console.log(error);
    }
}; 

anotherFunction(); 

const helloWorld = () => {
   return new Promise ((resolve, reject) => { 
      /* if(true) ? se ejecuta si es true : se ejecuta si es false */
      (true) ? setTimeout(() => resolve('Hello World'), 3000) : reject(new Error('Test Error))
   })
}

Es importante mencionar que siempre que se utiliza await
debe de existir un async previamente.

const helloAsync = async () => {
   const hello = await helloWorld();
   console.log(hello)
}

helloAsyn();

// async await
const helloWorld = () =>{
    return new Promise((resolve, reject) => {
        (true)  
        ? setTimeout(() => resolve('HELLO WORLD'), 3000)
        : reject(new Error('failed'))
    })
}

const otherFunction = async () => {
    try{
        const hello = await helloWorld()
        console.log(hello)
    }
    catch(error){
        console.log(error)
    }
}

otherFunction()

gdnx usa un if ternario dentro de la promesa

condición ? expr1 : expr2 

mi duda es si al usar el catch y el reject no es lo mismo ?

No es mejor resolver la promesa con .then() y .catch() ?

Gracias por la clase

Personal note: ver este video desps de Async course

creo que este tema esta expicado muy rapido. aqui dejo la documentacion de async

Soy la única que se siente como homero? https://www.youtube.com/watch?v=Yoe9Gw-QyRs

LA MITAD DE LAS COSAS NO LAS VIMOS EN LOS CURSOS DE LA RUTA ANTERIOR…

// ES8 Async / Await
const promise = resolved =>
  new Promise((resolve, reject) => (resolved ? resolve('resolve') : reject('reject')))
const asyncFn = async resolved => {
  try {
    console.log(await promise(resolved))
  } catch (error) {
    console.log(error)
  }
}
asyncFn(true)
asyncFn(false)

Estoy quemadisimo compañeros, no veo correlatividad entre las clases por eso me cuesta centrarme, es MUCHA informacion, pero es informacion MAGNIFICA. Probablemente vuelva a reveer todas las clases, y a acordarse de que no estamos en una carrera.
Excelente profesor, excelente index de temas para aprender y reforzar!

Para las personas que se sienten como yo, que estan perdidos jajaja. No se preocupen es normal porque las Promises, Async & Await es algo complicado.
Creo que lo mencione antes para saber más sobre esto existe un curso de asincronismo.
En lo personal veo este curso como una introducción a todas estas nuevas funciones, que pudo poner ejemplos a lo mejor. Más para conocer que en lo practico. Pero vaya si son nuevas cosas jajaja.

Un poco confuso, aquí les dejo un video para reforzar la teoría y practica. Al final, es lo mismo que hace el profe Oscar.
.
https://www.youtube.com/watch?v=rKK1q7nFt7M

“Promise” va con mayúscula jajaja.

// Async Await Ejemplo en MDN
function resolveAfter10Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve(‘resolved’);
}, 10000);
});
}

async function asyncCall() {
console.log(‘calling’);
console.log(new Date());
const result = await resolveAfter10Seconds();
console.log(new Date());
console.log(result);
// expected output: “resolved”
}

asyncCall();
Se selecciona el código a ejecutar > clic derecho > Run Code. Aparece el resultado:
[Running] node “c:\Users\xxxx\src\es8\tempCodeRunnerFile.js”

calling
2022-02-22T15:59:49.949Z
2022-02-22T15:59:59.958Z
resolved

[Done] exited with code=0 in 10.237 seconds

// Async Await Ejemplo
const helloWorld = (mensajeResolve, tiempo) => {
return new Promise((resolve, reject) => {
//if ternario
console.log(new Date());
(true) ? setTimeout(() => resolve(Inicia ${mensajeResolve}),tiempo) //tiempo segundos
: reject(new Error(“Test Error reject”))
})
};

const helloAsync = async () => {
// console.log(new Date());
const hello = await helloWorld(“Ejemplo 1 Hello World Resolve”, 3000);
console.log(new Date());
console.log(hello);
}

helloAsync();

//Otro ejemplo con try catch
const anotherFunction = async () => {
try {
// console.log(new Date());
const hello = await helloWorld(“Ejemplo 2 Hello World Resolve”, 6000);
console.log(new Date());
console.log(hello);
} catch (error) {
console.log(error);
}
};

anotherFunction();
Se selecciona el código a ejecutar > clic derecho > Run Code. Aparece el resultado:
[Running] node "c:\Users\xxxx\EcmaScript\src\es8\tempCodeRunnerFile.js"
2022-02-22T15:45:52.444Z
2022-02-22T15:45:52.450Z
2022-02-22T15:45:55.452Z
Termina Ejemplo 1 Hello World Resolve
2022-02-22T15:45:58.452Z
Termina Ejemplo 2 Hello World Resolve

[Done] exited with code=0 in 6.181 seconds

![](

Creo que las promesas se crearon para darle solución a lo que pasaba con los Callbacks Hell. :V

Sería recomendable explicar para qué vamos a usar Async, Promise y etc. en ejemplos de la vida real porque francamente hasta ahora (y lo digo desde la ignorancia, si lo enseñan es porque para algo se usa), parecen más bien curiosidades teóricas que algo útil.

Quizás para los que depronto no hayan visto los Operadores ternarios:

Estos son basicamente if que tienen la capacidad de ejecutarse en una linea linea de código, es muy útil cuando solo ejecutamos una cosa en caso de que sea verdadero o una cosa en caso de que sea falso, sin embargo tiene muchas más aplicaciones-

La sintaxis sería la siguiente:

condición ? expr1 : expr2

Cuando es verdadero retorna el valor de expr1 y
cuando es falso retorna el valor de expr2.

Podemos entonces crear un ejemplo sencillo:

let num = 5 
let num2 = 5
num === num2 ? console.log("son iguales" ) : console.log("son distintas")

Para full documentación visita el siguiente link y mira las diferentes formas en las que podemos aplicarlo en JS

He tomado el aporte del compañero @boristrochez y le he añadido un porcentaje por consola mientras se cumple el tiempo de preparación.

// Async Await
const prepareIceCream = (money) => {
  return new Promise((resolve, reject) => {
    if (money >= 500) {
      setTimeout(() => {
        resolve("Aqui esta tu helado de cookies and cream!");
      }, 40); //3. Si el dinero que ingresaste es mayor o igual a 500, entonces te preparamos el helado. El proceso toma 6 segundos.
    } else {
      reject("Disculpa, pero no tienes suficiente dinero =/"); //3. Si el dinero es menor a 500, lo sentimos, no te alcanza
    }
  });
};

const buyIceCream = async (money) => {
  try {
    console.log("Bienvenido al Mundo del Helado de Crema!");
    var i = 0;
    console.log("Estamos preparando tu pedido...");
//Se crea un loop para mostrar un porcentaje por consola mientras se espera el tiempo
    while (i < 100) {
      var result = await prepareIceCream(money); //2. Esperas aquí mientras envíamos el dinero, lo verifican y te preparan el helado
      process.stdout.write("Preparando helado: " + i + " %\r");
      i++;
    }
    console.log(result); //4. Imprimimos tu pedido! si todo salió bien.
    console.log("Gracias por su compra!");
  } catch (e) {
    console.log(e); //4. Te decimos que no salió bien el proceso porque tu dinero no es suficiente.
  }
};

buyIceCream(600); //1. llamas a la funcion comprar helado e Ingresas el dinero

Ejemplo de Async Await

function sayHello(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Hello " + name);
      resolve(name);
    }, 1000);
  });
}

function talk(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Bla bla bla bla");
      resolve(name);
    }, 1000);
  });
}

function sayBye(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Goodbye " + name);
      resolve(name);
    }, 2000);
  });
}

async function conversation(name) {
  console.log("Starting async process...");
  await sayHello(name);
  await talk();
  await talk();
  await talk();
  await sayBye(name);
  console.log("Process completed");
}

conversation("Sebastian");

• 2. Async Await

  Usar async y await en las promesas es una de las mejores funcionalidades que se añadieron en ES8. La función async declara una función asíncrona que retorna como valor una promesa, este tipo de funciones async pueden tener una expresión await, que pone en espera la ejecución de la función async mientras la promesa se resuelve, luego de que se devuelve el valor de la promesa reanuda la ejecución del async y el valor resuelto.

  Para usar estas funciones primero vamos a crear nuestra promesa. La llegada de Async y Await simplifican el comportamiento de nuestras promesas (al momento de definir una función async ya tenemos disponible .then y .catch) después que tenemos nuestra promesa lista creamos la función asíncrona con la palabra reservada async donde dentro de esta en una variable crearemos una nueva instancia de la función de la promesa y la guardaremos con la expresión await (al usar await esperará a que la promesa de un resultado), luego que esta promesa se ejecute se imprime el resultado de la promesa.

  Usando try y catch es mucho mejor ya que ejecutamos el bloque de código dentro de try si la promesa fue resuelta y si la promesa fue rechazada, ejecutamos el bloque de código dentro de catch.

  const helloWorld = () => {
    return new Promise((resolve, reject) => {
      false
        ? setTimeout(() => resolve("Hello World!"), 3000)
        : reject(new Error("Test error"));
    });
  };
  
  //Creamos la función que va a implementar el async 
  //El await se usará para cada uno de los llamados que sean necesarios
  const helloAsync = async () => {
  	//Al usar await, esperará a que la promesa de un resultado
    const hello = await helloWorld();
  	//luego de que la promesa retorne un resultado imprimimos en consola el resultado
    console.log(hello);
  };
  
  helloAsync();
  
  // Ahora usando try y catch
  
  const anotherFunction = async () => {
    try {
  		//Se ejecuta este bloque si la promesa fue resuelta
      const hello = await helloWorld();
      console.log(hello);
    } catch (error) {
  		//Se ejecuta este bloque si la promesa fue rechazada
      console.log(error);
    }
  };
  
  anotherFunction();
  

  Veamos un ejemplo práctico.

  const makingBurgers = (money) => {
    return new Promise((resolve, reject) => {
      if (money === 1) {
  			//Si el dinero es igual a 1, entonces se confirma
  			//que prepararán la hamburguesa y luego esperas 5
  			//segundos hasta que esté lista
        console.log("We are preparing your burger");
        setTimeout(() => resolve("Here's your order"), 5000);
      } else if (money === 2) {
  			//Si el dinero es igual a 2, entonces preparan las 
  			//hamburguesas y esperas 10 segundos a que estén listas
        console.log("We are preparing two burgers for u and ur gf.");
        setTimeout(() => resolve("Here's your order, enjoy it!"), 10000);
      } else {
  			//En caso de pasar cualquier otro parámetro, te dicen que 
  			//vuelvas pronto ya que no te van a atender
        reject("Sorry! Come back soon!");
      }
    });
  };
  
  const burgersOrder = async (money) => {
    try {
      const result = await makingBurgers(money);
      console.log(result);
    } catch (resultadoerroneo) {
      console.log(resultadoerroneo);
    }
  };
  
  burgersOrder(0);
  

Para quienes no entendieron lo siguiente.

(true) ? setTimeout(() => resolve('Hello World'), 3000) : reject(new Error('Test Error'))

Es solo un operador condicional(ternario). En resumen solo es una condicional con un if y else. En el siguiente lik podrán saber como se usa.

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Les dejo el codigo que cree para atender un restaurante, espero les ayude. Saludos

const restaurant = (pedido)=>{  //recibe el pedido
    return new Promise((resolve,reject)=>{
        console.log('Bienvenido al restaurante Elguzmi');
        let comidas = Object.values(pedido);  //utilizo el metodo de values para estraer los valores en forma de array 
        console.log(comidas); //verifico cuales son los platos
        //como requisito minimo del restaurante se verifica que se este pidiendo al menos un plato
        (comidas.length >= 1)?resolve('Ok vamos a preparar tu pedido'): reject(new Error('Lo siento no podemos realizar tu pedido'))
    });
}

const pidiendo = async pedido1=>{  //recibe le pedido de tipo objeto
    try{
        const confirmacion = await restaurant(pedido1); //por medio de await llamo la promesa pasandole tambien el parametro del pedido
        console.log(confirmacion);
    }catch(error){
        console.log(error);
    }
}
//Creo el pedido en un objeto
pedido1 = {
    entrada:'patacones',
    platoFuerte:'arroz con pollo',
    bebida:'agua siuuuuu'
}
//llamo a la funcion de tipo async y como parametro le paso el pedido de tipo objeto
pidiendo(pedido1);

Ya casi te gano js haha con toda la actitud

https://www.youtube.com/watch?v=Q3HtXuDEy5s
les dejo este video hace buenos ejemplos de callbacks,promise y async await me sirvio bastante para quitarme dudas

Mas info sobre Async Await:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

trycatch

¿Cómo se majearía la asincronía de JavaScript dentro de la programación orientada a objetos?

Que lindo el Async y Await 😃

Async await, en el que se usan funciones y promesas para poder ver su comportamiento. Estas permiten ser más claro al crear funciones y trabaja mejor con el asincronismo.

Bien

No sabia q se podia hacer el if else asi. Excelente !!

Esto es excelente!