No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Async/await

10/31
Recursos

Aportes 104

Preguntas 16

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Me parece importante marcar que para este caso de aplicaci贸n no es necesario declarar las funciones hola(), hablar() y adios() como async, ya que en ning煤n momento estamos haciendo un await dentro de las mismas, s贸lo devuelven las promesas.

increible explicacion me quedo mas claro que en el curso de asincronismo 馃槂

RESUMEN:


Para evitar que todo se vea as铆ncrono, y que la sint谩xis sea m谩s legible las operaciones secuenciales como hacer un archivo que se procese, subirlo para tener una URL y de ah铆 mandarla a una base de datos.
Async y Await nos permite definir una funci贸n de forma expl铆cita como as铆ncrona y esperar a que la funci贸n termine. No estar谩 bloqueando el hilo principal, pues estar谩 esperando a que se resuelva con el event loop

// La palabra async  la convierte inmediatamente en as铆ncrona.
async function hola(nombre) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('Hola, '+ nombre);
            resolve(nombre);
        }, 1500);
    });
}

async function hablar(nombre) {
    return new Promise( (resolve, reject) => {
        setTimeout(function() {
            console.log('Bla bla bla bla...');
            resolve('Hay un error');
        }, 1000);
    });
}

async function adios(nombre) {
    return new Promise( (resolve, reject) => {
        setTimeout(function() {
            console.log('Adios', nombre);
            resolve();
        }, 1000);
    });
}


// Await solo es v谩lido dentro de una funci贸n as铆ncrona.
async function main() {
    let nombre = await hola('Alejandro');
    await hablar();
    hablar(); // Para hacer que se ejecute en segundo plano no debe existi el await
    await hablar();
    await adios(nombre);
    console.log('Termina el proceso');
}

// Esto nos permitir谩 saber si nuestra funci贸n se est谩 ejecutanod de forma as铆ncrona.
console.log('Empezamos el proceso');
main();
console.log('Va a ser la segunda instrucci贸n')

Asyn/Await es azucar sintactico, es decir, una forma muy legible y entendible de realizar c贸digo, un Async/Await no deja de ser una funci贸n as铆ncrona, la diferencia es que al usar esta sintaxis se podr谩 ver un c贸digo m谩s legible.
Para usar correctamente esta sintaxis usamos Async para declarar una funci贸n as铆ncrona, cuando una funci贸n es as铆ncrona podremos usar dentro de su contexto el Await.
El Await es la manera en que le indicaremos a nuestro c贸digo que ha de 鈥渆sperar鈥 a que el evento al cual le indiquemos Await es importante para el proceso del c贸digo, por ende, para poder seguir ejecutando el proceso espere a que el evento se resuelva y retorne un valor.
Cuando este retorne un valor el c贸digo seguir谩 normalmente.
Let nombre = 鈥榊ourName鈥;
Async helloWorld(nombre){
Await resolveName(nombre)
whoAreYou(nombre); <-- esta funci贸n no se ejecutara hasta que el await se resuelva.
}

Creo que no era necesario definir como funciones as铆ncronas a hola, hablar y adios, simplemente con definir como as铆ncrona a la funci贸n que va a ejecutar las otras (main) es suficiente para usar el await.

Aca dejo un video de Leonidas Esteban sobre async await que est谩 muy bueno: https://www.youtube.com/watch?v=E5ENWEcoDdI 馃槂

async await, async await, async await, async await鈥 En la jungla tan imponente el le贸n rey duerme ya鈥

Async/await


La sintaxis de Async/await nos va a permitir definir una funci贸n de forma expl铆cita como funci贸n as铆ncrona y poder esperar a que esa funci贸n termine.

async function hola(nombre) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Hola, ${nombre}`)
            resolve(nombre)
            reject('No s茅 qu茅 paso')
        }, 1500)
    })
}

async function hablar(nombre) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Bla bla bla bla...`)
            resolve(nombre)
        }, 1000)
    })
}

async function adios(nombre) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Adi贸s, ${nombre}`)
            resolve()
        }, 1000)
    })
}

async function main() {
    let nombre = await hola('Carlos')
    await hablar()
    await hablar()
    await hablar()
    await hablar()
    await adios(nombre)
}

console.log('Empezamos el proceso')
main()
console.log('Terminamos el proceso')

Descubre el secreto del sabio Math:

const numfrases = 20;

//arreglo de frases sabias
const SmartArrayFrases = [
    '1. No hay que ir para atr谩s ni para darse impulso (Lao Ts茅) Una frase motivadora que aconseja seguir siempre nuestro camino a pesar de las adversidades.',
    '2. No hay caminos para la paz; la paz es el camino (Mahatma Gandhi) Gandhi nos dej贸 para la historia esta preciosa frase sobre la paz.  ',
    '3. Haz el amor y no la guerra (John Lennon) El cantante John Lennon siempre tuvo una mentalidad pacificadora.  ',
    '4. Para trabajar basta estar convencido de una cosa: que trabajar es menos aburrido que divertirse (Charles Baudelaire)  El trabajo, a pesar de que siempre apetezca hacerlo, es bueno para nuestra salud mental.',
    '5. Lo peor que hacen los malos es obligarnos a dudar de los buenos (Jacinto Benavente)  Siempre es mejor ser honrado aunque a veces podamos creer lo contrario.',
    '6. Las guerras seguir谩n mientras el color de la piel siga siendo m谩s importante que el de los ojos (Bob Marley)  El racismo y los prejuicios han sido la causa de muchas guerras.',
    '7. Aprende a vivir y sabr谩s morir bien (Confucio)  La vida hay que disfrutarla en cada momento y no estar muerto en vida.',
    '8. Cada d铆a sabemos m谩s y entendemos menos (Albert Einstein)  No importa que cada vez haya m谩s conocimiento si no lo sabemos aplicar.',
    '9. El mundo no esten peligro por las malas personas sino por aquellas que permiten la maldad (Albert Einstein)  Siempre habr谩 gente mala, pero no podemos dejar que triunfen.',
    '10. La medida del amor es amar sin medida (San Agust铆n)  Una frase rom谩ntica que significa que debemos amar con todo.',
    '11. No hay nada que un hombre no sea capaz de hacer cuando una mujer le mira (Casanova)  El amor de un hombre por una mujer es capaz de mover el mundo.',
    '12. Dar el ejemplo no es la principal manera de influir sobre los dem谩s; es la 煤nica manera. (Albert Einstein)  A la hora de educar, es necesario que nosotros mismos seamos coherentes con lo que pretendemos ense帽ar.',
      ]

//funcion de saludo param茅trica, hola y adios son lo mismo, un saludo, solo cambia el tipo mensaje.
async function Saludo(tipo,nombre) {
    return new Promise((resolve, reject)=>{
        setTimeout(function() {
            console.log(tipo + " " + nombre);
            resolve(nombre);
        }, 100)
    });
}

// hablar es la accion de emplear la funcion de las frases
async function hablar() {
    return new Promise((resolve, reject)=>{
        setTimeout(function() {
           frases()
        }, 100);
    })
}

//una conversacion es un grupo de frases organizadas de alguna manera 
async function conversacion(veces) {
    return new Promise((resolve, reject)=>{   
        setTimeout(function() {
            if (veces >= 1) {
                hablar()
                switch(veces){
                   case numfrases:
                       console.log("-- Dice el primer sabio:")  
                    break;
                   case 1:
                       console.log("-- Dice el 煤ltimo sabio:")
                    break;
                   default:
                       console.log("-- Dice el siguiente sabio:")
                    break;
                } 
                conversacion(--veces)
            } else {
              Saludo("Adios", "Eruditos, los sabios HAN DICHO o quiz谩s no...");
            }
           //resolve(conversacion());
        }, 100);
    })
}

// los sabios escogen frases aleatorias
function frases(){    
    //let i = Math.floor(Math.random() * SmartArrayFrases.length) Secreto de sabio

    let i = Math.round(Math.random() * SmartArrayFrases.length)
    if(SmartArrayFrases[i]){
        return console.log(SmartArrayFrases[i]) ;
    }else{
        return console.log("Algun sabio mantuvo el silencio, su secreto es que no sabia usar bien el math para escoger las frases, 驴podr谩s ayudarlo?")
    }
}

//maine capital augusta
async function Main(){
    await Saludo("Bienvenidos", "Viajeros estelares")
    await conversacion(numfrases);
}

Main();

Tomen lo que voy a decir como un comentario super positivo para el profesor(lo comento porque no quiero salir mal parado)
Este es mi vig茅simo curso, he tomado cursos desde html y css, hasta cursos de niveles ya avanzado en vue, y es que en todo los cursos de javascript explican este concepto, y este es el profesor que m谩s errores y dificultades ha tenido a lo largo de su explicaci贸n Y NO ENTIENDO el POR QU脡 PERO ES AL QUE MEJOR LE HE ENTENDIDO LA ASINCON脥A, ES FANT脕STICO, GRACIAS CARLOS
Psdta. me imagino a Freddy en todos los cursos de js diciendo, vas a ense帽ar callback, promise y async await y te va a gustar jajajajajajaja

En inform谩tica, el az煤car sint谩ctico es un t茅rmino acu帽ado por Peter J. Landin en 1964 para referirse a los a帽adidos a la sintaxis de un lenguaje de programaci贸n dise帽ados para hacer algunas construcciones m谩s f谩ciles de leer o expresar. Esto hace el lenguaje 鈥渕谩s dulce鈥 para el uso por programadores: las cosas pueden ser expresadas de una manera m谩s clara, m谩s concisas, o de un modo alternativo que se prefiera, sin afectar a la funcionalidad del programa.

Fuente: Wikipedia

Comparto un post que explica un poco m谩s de promesas y async await. Espero les guste y puedan dejar feedback!

https://platzi.com/tutoriales/1789-asincronismo-js/5063-las-promesas-y-async-await-logicamente-no-son-iguales-y-te-explico-el-porque/

async function hello(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("hello", name);
      resolve();
    }, 1500);
  });
}

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

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

async function main() {
  let name = await hello("George");
  await speaks();
  await speaks();
  await speaks();
  await bye(name);
  console.log("End process");
}

console.log("Init process");
main();

He seguido toda la ruta de la escuela de JavaScript y ha servido como complemento perfecto de los otros cursos.

Me queda super claro todo.

Async y Await nos permite definir una funci贸n de forma expl铆cita como as铆ncrona y esperar a que la funci贸n termine.

La palabra await solo funciona dentro de una funci贸n as铆ncrona.

Con Async / Await podemos tratar funciones as铆ncronas como si fuesen s铆ncronas y que la sint谩xis sea m谩s legible.

Las funciones con Async / Await no estar谩n bloqueando el hilo principal, pues estar谩n esperando a que se resuelva con el event loop.

Partiendo de las funciones con las que hemos estado trabajando鈥

function hola(nombre) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Hola, ' + nombre);
      resolve(nombre);
    }, 1500);
  });
}

function adios(nombre) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Adios, ' + nombre);
      resolve();
    }, 1000);
  });
}

function hablar(nombre) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('Bla Bla Bla Bla Bl谩...');
      resolve(nombre);
      /* reject('Hay un error'); */
    }, 1000);
  });
}

鈥 vamos a usar una funci贸n llamada 鈥渕ain鈥 para llamarlas de usando await, sin embargo a esta funci贸n hay indicarle explicitamente que tendr谩 un comportamiento as铆ncrono y va a esperar la respuesta de sus llamadas, por eso al lado de 鈥渇unction鈥 le ponemos la palabra reservada 鈥渁sync鈥.

async function main() {
  let nombre = await hola('Jorge');
  await hablar();
  await hablar();
  await hablar();
  await adios(nombre);
  console.log('Terminamos el proceso');
}

A帽adimos la respuesta de la funci贸n as铆ncrona hola a una variable llamada 鈥渘ombre鈥 para poder utilizarla en la funci贸n adios.

Por 煤ltimo solo hay que llamarla para ver los resultados.

console.log('Empezamos el proceeso...');
main();
console.log('Va a ser la segunda instrucci贸n que se ejecute');

En consola, obtendr铆amos la siguiente respuesta:

Date cuenta que la respuesta se muestra de forma sincrona. La funci贸n hola, a煤n cuando tarda 1500 ms y las dem谩s solo 1000, es la que primero se muestra. La respuesta seguir谩 el orden en el que fueron declaradas las funciones.

Saludos compa帽eros, el tema de async y await es un tanto tricky con respecto a como es que trabaja await. Lo entend铆 despues de estar experimentandolo y me gustar铆a hacer un aporte a la comunidad compartiendo mis apuntes con respecto a este tem, espero les sirva.
Por medio de async se indica que la funci贸n correra de manera as铆ncrona y con await lo que se har谩 es que las funciones que hagan peticiones a una api u otra cosa de manera as铆ncrona quien tenga el await esperar谩 que los anteriores terminen su funci贸n y tambi茅n har谩 que las siguientes funciones deban esperar a que esa funci贸n termine. Por ello las siguientes im谩genes tienen sentido.

const goingOutside = async () => {
    try {
        leave();
        walkingTimer();
        console.log("Good evening1");
        await pickUp();
        pickUp();
        journeyCar();
        console.log("Good evening2");
    }
    catch {
        console.error("Hay un error.")
    }
}
goingOutside();

Aparece primero Good evening1 porque las funciones que est谩n atr谩s del await van a tardar y est谩n trabajando fuera del call stack y lo que se puso dentro del call stack fue

        console.log("Good evening1");

Y luego se imprimen las dem谩s sin un orden determinado solo seg煤n como tarde cada funci贸n en acabar su tarea. Y como ahora terminaron todas las funciones que estaban antes del await rec铆en empezar谩 la funci贸n

  await pickUp();

Y cuando reci茅n termine es cuando las funciones que est谩n delante de esta empezar谩n a funcionar y como cada una est谩 fuera del call stack y quien si est谩 es

 console.log("Good evening2");

por ello es quien se imprime y luego de ello se imprimen los dem谩s en funci贸n de cuanto tarden.

No deja de sorprenderme la actitud del profesor, incre铆ble. 馃憦馃徏

Sintaxis para el manejo de errores =)
await foo().catch(error => console.log(error));

Hoy por fin entend铆 totalmente el async/await

Para el manejo de errores (tal como lo hicimos con .catch() en las Promises) ser铆a el uso de bloques try y catch, de esta manera manejamos tanto errores en c贸digo como rejects de las promesas.

async function hola(nombre){
return new Promise(function(resolve,reject){
setTimeout(function(){
console.log('hola, '+nombre);
resolve(nombre);
},1000);
});
}
async function hablar(nombre) {
return new Promise((resolve,reject)=>{
setTimeout(function () {
console.log(鈥榖la bla bla bla鈥︹);
resolve();
},1000);
});
}
async function adios(nombre) {
return new Promise((resolve,reject)=>{
setTimeout(function () {
console.log(鈥榓dios鈥,nombre);
resolve();
},1000);
});
}

//lo que se ejecutara鈥

async function main(){
let nombre =await hola(鈥楥arlos鈥);

await hablar();
await hablar();
await hablar();
await adios(nombre);
console.log('Terminando el Proceso...')

}
console.log(鈥業niciando el Proceso鈥︹)
main();

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

Hay dos partes para usar async / await en su c贸digo.

<h4>La palabra clave asincr贸nica</h4>

En primer lugar tenemos la聽asyncpalabra clave, que pones delante de una declaraci贸n de funci贸n para convertirla en una聽funci贸n as铆ncrona聽.聽Una funci贸n as铆ncrona es una funci贸n que sabe c贸mo esperar la posibilidad de que la聽awaitpalabra clave se utilice para invocar c贸digo as铆ncrono.

Entonces, la async palabra clave se agrega a las funciones para decirles que devuelvan una promesa en lugar de devolver directamente el valor.

<h4>La palabra clave de espera</h4>

La ventaja real de las funciones as铆ncronas se hace evidente cuando las combina con la聽palabra clave聽await聽; de hecho,聽awaitsolo funciona dentro de las funciones as铆ncronas聽.聽Esto se puede poner delante de cualquier funci贸n asincr贸nica basada en promesas para pausar su c贸digo en esa l铆nea hasta que se cumpla la promesa, luego devolver el valor resultante.

Puede usarlo聽awaital llamar a cualquier funci贸n que devuelva una promesa, incluidas las funciones de API web.

Por si gustan usar tambien el try-catch

async function main() {
  try {
    let nombre = await hola("Simon");
    await hablar();
    await hablar();
    await hablar();
    await adios(nombre);
  } catch (error) {
    console.log("Error");
  }
}```

Es bueno entender que async/await hace parecer al proceso s铆ncrono, por lo que algunos beneficios de la concurrencia se pueden perder. Como decia tio Ben:

Todo poder conlleva una responsabilidad

Aqu铆 dejo un ejemplo:

const print = (msg) => {
    console.log(msg);
    return msg;
}

const future_message = () => {
    return new Promise((resolve, reject) => 
        setTimeout(() => resolve(print("Genesys is Skynet")), 3000));
}

async function main(){
    const msg = await future_message()
    console.log("Hello to the program!")
    console.log("msg: ", msg)
}

main()```

El programa imprimir谩


Genesys is Skynet
Hello to the program!
msg: Genesys is Skynet


Si usamos then en lugar de await 

const print = (msg) => {
console.log(msg);
return msg;
}

const future_message = () => {
return new Promise((resolve, reject) =>
setTimeout(() => resolve(print(鈥淕enesys is Skynet鈥)), 3000));
}

function main(){
future_message().then((msg) => console.log("msg: ", msg));
console.log(鈥淗ello to the program!鈥)
}

main()


la salida ser

Hello to the program!
Genesys is Skynet
msg: Genesys is Skynet```

Entendiendo la naturaleza del programa podemos combinar los dos m茅todos de la mejor manera

Yo solo quiero pegar mi codigo en todas partes
Asinc Await nos permite usar promesas de una manera mas f谩cil de leer.

async function main(){
  const response = await hola('Adranuz')
  await hablar()
  await hablar()
  await hablar()
  await hablar()
  await adios(response)
  console.log('Terminando el proceso')
  
}
console.log('Comenzando el proceso')
main()
console.log('Verificando asincronismo')

As铆 ser铆a mucho m谩s f谩cil la explicaci贸n.

const doSomenthingAsync = () => {
	return new Promise ( resolve => {
		setTimeout( () => resolve ('I did something async'), 2000)
	});
}

const doSomething = async () => {
	console.log(await doSomenthingAsync());
}

doSomething()  //para ejecutar la funci贸n

//procesos a sincronos pero visualemnte sincronos
async function main(){
   //la funcion hola  repsonde el nombr eingresado y se guarda en una variable.
    let nombre=await hola("Alexis");
    await hablar();
    await hablar();
    await hablar();
    await hablar();
    await adios(nombre);
    console.log('Terminasmos...')
}

console.log('empezamos el proceso...')
main();```

muy interesante el planteamiento

async function hola(nombre, micallback) { 
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (true) {
                console.log(`hola ${nombre}`);   
                resolve(nombre); 
            } else {
                reject('Error al saludar');
            }
            
        }, 1000);
    });
}

async function hablar(nombre) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (true) {
                console.log('bla bla bla bla');
                resolve(nombre);
            } else {
                reject('Error encontrado al hablar');
            }
            
        }, 500);
    });
}

async function adios(nombre, otrocallback) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (true) {
                console.log(`Adios ${nombre}`)
                resolve();
            } else {
                reject('error al despedirse');
            }
            
        }, 2000);
    });
}

function conversacion(nombre, veces, callback) {
   if (veces >0) {
       hablar(() => { 
           conversacion(nombre, --veces, callback);
       })
   } else {
       adios(nombre, callback);
   }
  
}

async function main() {
    let nombre = await hola('Francisco');
    await hablar();
    await hablar();
    await hablar();
    await hablar();
    await hablar();
    await adios(nombre);
    console.log('adios await');
}

console.log('hola async');
main();

Alguien sabe por sin poner la palabra async en las tres primeras funciones sigue funciona de forna asincrona?

function hola (name) {
    return new Promise((resolve, reject)=>{
        setTimeout(_=>{
            console.log(`Hola ${name}`);
            resolve(name);
        }, 1000);
    })
}

function hablar(){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            console.log(`Bla Bla bla ....`);
            resolve();
            // reject(`hubo un error`)
        },1000)
    })
}

function adios (name){
    return new Promise((resolve, reject)=>{    
        setTimeout(_=>{
            console.log(`Adios ${name}`)
            // reject(`huvo error`);
            resolve();
        }, 1000) 
    })
}

async function main(){
    let name = await hola(`Carlos`);
    await hablar();
    await hablar();
    await hablar();
    await adios(name);
    console.log(`Terninamos el proceso`);
}
console.log(`Empesamos el proceso`);
main();
function love() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('鈾ワ笍');
        }, 2000);
    });
}

async function msg() {
    const msg = await love();
    console.log(msg);
}
msg(); // Message: 鈾ワ笍 <-- after 2 seconds```

Tambi茅n podemos utilizar el try / catch de una funci贸n async:

async function hola(nombre) {
  try {
    setTimeout(() => {
      console.log("Hola", nombre)
    }, 1000)
  } catch (err) {
    console.log(err)
  }
}

async function hablar(nombre) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log("bbla bla bla bla")
      resolve(nombre)
      // reject("Hay un error")
    }, 1000)
  })
}

async function adios(nombre, otroCallback) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      console.log("Adios", nombre)
      resolve()
    }, 1000)
  })
}

function conversacion(nombre, veces, callback) {
  if (veces > 0) {
    hablar(function () {
      conversacion(nombre, --veces, callback)
    })
  } else {
    adios(nombre, callback)
  }
}

async function main(nombre) {
  await hola(nombre)
  await hablar()
  await hablar()
  await hablar()
  await adios(nombre)
}

console.log("Empieza el proceso")
main("Leandro")
console.log("Termina el proceso")```

Async/Await nos ayuda a transformar los procesos de forma aparentemente sincronos. Para aplicarlo tenemos:

  1. Declarar una la funci贸n que queremos que su c贸digo sea sincrono como async.
async function nuestraFuncion(){
	// nuestro c贸digo ...
}
  1. Luego dentro del c贸digo debemos indicar las funciones que referenciamos con await, de esta forma el proceso espera que termine la funci贸n para seguir avanzando.
async function nuestraFuncion(){
	await nuestraFuncionAwait();
}

As铆ncrono.js


async function hola(nombre) {
    return new Promise(function (resolve, reject) {
        setTimeout(function() {
            console.log("Hola, " + nombre);
            resolve(nombre);
        }, 1500);
    });
}
async function hablar(nombre) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            console.log("bla, bla, bla, bla");
            resolve(nombre);
        }, 1000);
    });
}

async function adios(nombre) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            console.log("Adios", nombre);
            resolve();
        }, 1000);
    });
}

async function main() {
    let nombre = await hola('Cristobal');
    await hablar();
    await hablar();
    await adios(nombre)
    console.log('Terminamos el proceso...');
}

console.log('Empezamos el proceso...');
main();



He aqu铆 mi c贸digo

async function hola(n) {
    return new Promise( (resolve, reject) => {
        setTimeout( () => {
            log('Hola '+n)
            resolve(n);
        },1000) 
    })

}
async function hablar(n) {
    return new Promise( (resolve, reject) => {
        setTimeout(() => {
            log('BLA bla BLA');  
            resolve(n);  
        }, 1000);
    })
}

async function adios(n) { 
    return new Promise( (resolve, reject) => {
        setTimeout(() => {
            log('Hemos terminado de ejecutar el proceso mi compa ' + n);  
            resolve(n);  
        }, 1000);

    })
}
function log(str) {
    console.log(str);
}
async function main(){
    await hola('Carlos Enrique');
    await hablar();
    await hablar();
    await hablar();
    await adios('Carlos Enrique');
    log('TERMINO...');
}
log('Iniciamos el proceso')
main();
log('Terminamos el proceso en teoria');```
async function hola(nombre) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Hola, " + nombre);
            resolve(nombre);
        }, 1500);
    });
    
}

async function adios(nombre) {
    return new Promise((resolve, reject) => {
        setTimeout( function() {
            console.log("Adios",  nombre);
            resolve();
        }, 1000);
    });
    
}

async function hablar(nombre) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            console.log("Bla bla bla...");
            resolve(nombre);
            reject('Hay un error');
        }, 1000)
    });
    
}
async function main() {
   let nombre = await hola('Carlos');
    hablar();
    await adios(nombre);
}

console.log('Iniciando proceso');
main();
console.log('Terminando proceso');

He refactorizado el c贸digo, como muchos lo han comentado es inecesario retornar una promesa.

async function hola (name) {
  console.log(`Hola ${name}`)
}

async function adios (name) {
  console.log(`Adios ${name}`)
}

async function hablar () {
  console.log('Bla bla bla....')
}

async function main () {
  const nombre = 'Jos茅'
  await hola(nombre)
  await hablar()
  await hablar()
  await hablar()
  await adios()
}

console.log('Comienzo asincron铆a')
main()
  .catch(console.error)
console.log('No bloqueo el hilo principal')

Se ve muy bien en el codigo el uso de async/await, aunque lo que rompe lo 鈥渓indo鈥 es la obligatoriedad de usar un try catch para el manejo de errores en esos casos, colocando una nueva identacion y nuevas llaves. La verdad no se cual prefiero

Async/Await

Va a permitir definir una funcion de forma asincrona y esperar, de cualquier forma a nivel tecnico no va a bloquear el hilo principal ya que este estara espereando nuevas peticiones.

// Async Awaite 
//Declaracion de funciones 
//Funcion hola
async function hola(nombre){
    return new Promise(function(resolve, reject){
      setTimeout(function() {
        console.log('Hola ' + nombre);
        resolve(nombre);
        // En caso de que la funcion falle manda el reject 
        //reject('Algo no salio como lo pensaba')
    }, 1000);
    });
  }
  //Funcion hablar 
  async function hablar(nombre){
    return new Promise((resolve, reject) => {
      setTimeout(function(){
        console.log('Bla.. Bla.. Bla..');
        resolve(nombre);
      },1000);
    });
  }
  
  //Funcion adios 
  async function adios(nombre){
    return new Promise( (resolve, reject) => {
      setTimeout(function() {
        console.log('Adios ' + nombre);
        resolve();
      }, 1000);
    });
  }
  
  
  //  ---- 
  // Inicio de la funcion 
async function main(){
    let nombre = await hola('Robb ');
    await hablar();
    await hablar();
    await adios(nombre);
}

console.log('Emepezando el proceso');
main();
console.log('Termina el proceso, pero tiene que esperar a que terminen todo los otros procesos');
<h5>Resultado:</h5>
[nodemon] starting `node asyncAwait.js`
Emepezando el proceso
Termina el proceso, pero tiene que esperar a que terminen todo los otros procesos
Hola Robb 
Bla.. Bla.. Bla..
Bla.. Bla.. Bla..
Adios Robb 

Nota:
Esta notacion se utiliza para declarar variables en el ambito donde fue generara, es decir si esta el la funcion general su scope sera solo este, si esta en alguna funcion {} su scope sera solo este.

let nombre = 

Algo que me parece importante resaltar es que **siempre ** que se use async/await es una excelente pr谩ctica encerrar el await en un try/catch esto nos permitir谩 manejar errores y evitar sorpresas cuando algo salga mal.

const foo = async() => {
	try {
		await myPromise();
	} catch(err){
		console.log('Oops!')
	}
}

try...catch


(async () => {
  try {
   // Declaraciones a ejecutar
    await first()
    await second()
    await bad()
  } catch (error) {
    // Si ocurre alguna excepci贸n al ejecutar las declaraciones del bloque que estan en try
    console.log('Error', error)
  } finally {
   // Las declaraciones que se ejecuten en este bloque, se resolveran independientemente de lo que ocurra en try o en catch
    console.log('Se finalizo el proceso...')
  }
})()

Ejemplo

function first() {
  return new Promise((resolve, _) => {
    setTimeout(() => {
      console.log('first')
      resolve()
    }, 2000)
  })
}

function second() {
  return new Promise((resolve, _) => {
    setTimeout(() => {
      console.log('second')
      resolve()
    }, 2000)
  })
}

function bad() {
  return new Promise((_, reject) => {
    setTimeout(() => {
      console.log('bad')
      reject(new Error('auch!!! bad promise'))
    }, 2000)
  })
}

(async () => {
  try {
    await first()
    await second()
    await bad()
  } catch (error) {
    console.log('error', error)
  } finally {
    console.log('finalizo el proceso...')
  }
})()
async function hablar(nombre) {
    return new Promise((resolve, reject) => {
      setTimeout(function () {
        console.log("hablando blaa bla bla bla");
        resolve(nombre)
      }, 1000)
    });
  
  }
  
  
  async function hola(nombre) {
    return new Promise(function(resolve,reject){
      setTimeout(function(){
          console.log('hola, '+nombre);
          resolve(nombre);
      },1000);
  });
  }
  
  
  
 async function adios(nombre) {
    return new Promise((resolve,reject)=>{
          setTimeout(function () {
              console.log('adios',nombre);
              resolve(nombre);
          },1000);
      });
  }
  


  async function main(){
      nombre=await hola('david');
      await hablar();
      await hablar();
      await hablar();
      await hablar();
      await adios(nombre);
  }
  
  • La sintaxis async await nos va ha permitir definir una funci贸n as铆ncrona y permitir que esta termine. Async await se basa en promesas.
function myfunction(){
	return New Promise( (resolve, reject) => {
		鈥ode
		If(code === true){
			resolve(correctValue);
		}else {
			Reject(wrongValue);
		}
	});
}
async function Mymainfuction(){
	await myfunction();
}

Si queremos evitar que nuestro codigo se siga viendo asincrono, como podriamos evitar que todo lo asincrono se vea asi, a veces que queremos que se vaya ejecutando de forma continua ya que hay funciones que requieren una de otra y por eso se requieren ejecutar de forma ordenada.

Para todo esto se creo la funcion de Async await que nos va a permitir definir una funcion de forma explicita de forma asincrona y asi esperar que esta funcion termine.

Para hacer que nuestras funciones sean asincronas solo tenemos que agregar el prefico async

async function hola(){};
const adios = async (nombre) => {}

Para poder ejecutar nuestro codigo necesitariamos crear una funcion asincrona donde dentro utilicemos AWAIT para poder ejecutar cada fucncion.

const hola = async (nombre) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`Hola ${nombre}`);
      resolve(nombre);
    }, 1500);
  });
};
const main = async () => {
  await hola("Joel");
};

main();

Esto es tan potente que essto solo convierte las promesas en procesos aparentemente sincronos, gracias a esto podemos hacer que todo se espere y nuestroa funcion asincrona sea lo mas cercana a sincrona.

async function main () {
let nombre = 鈥楰aito-Kun鈥;
await hola(nombre);
// sin el await no espera que se cumpla la funcion hablar y ejecuta proceso terminado!
hablar();
await hablar();
await hablar();
await hablar();
await adios(nombre);
}

function hola(nombre) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(`Hola, ${nombre}`);
            resolve(nombre);
        }, 1500)
    });
    
}

async function hablar(nombre) {
    return new Promise((resolve, reject) => {
        setTimeout(function() {
            console.log('Bla bla lba bla... ');
            resolve(nombre);
            reject('Hay un error');
        }, 1000);
    });
}

async function adios(nombre) {
    return new Promise( (resolve, reject) => {
        setTimeout(function() {
            console.log(`Adios ${nombre}`);
            resolve(nombre);
        }, 1000);
    });
}

async function main() {
    let nombre = await hola('Johan');
    await hablar();
    await hablar();
    await hablar();
    await adios(nombre);
    console.log('Termina el proceso');
};
console.log('Empezamos el proceso');
main();

Async / Await

async function hello(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`Hola ${name}`)
      resolve(name)
    }, 1000)
  })
}

async function speak(name) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('blah blah blah...')
      resolve()
    })
  })
}

async function bye(name, otroCallback) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`Adios ${name}`)
      resolve()
    }, 1000)
  })
}

async function main() {
  let name = await hello('Santiago')
  await speak()
  await speak()
  await speak()
  await bye(name)
  console.log('Termina el proceso...')
}

console.log('Empezamos el proceso...')
main()

Async await me permite tener una sintaxis m谩s intuitiva y puedo saber como van a ser ejecutadas mis funciones s铆ncronas y as铆ncronas.

Creo que ya me esta quedando claro鈥 馃槃

Me gusta que en muchos cursos se retoma el mismo tema (curso pr谩ctico, b谩sico y profesional de js, etc), pues as铆 se afianzan los conocimientos. As铆 te das cuenta que todo est谩 conectado y que muchas veces influye m谩s que entiendas un tema para que lo ejecutes que aprenderlo todo de memoria.
Gracias Platzi! Gran profe btw

Este profe es genial , nos dice 鈥溾mpezamos con los m贸dulos鈥 隆Con una emoci贸n! 馃榿 En verdad motiva mucho.

async/await, convertir las promesas en procesos aparentemente sincronos que tiene funciones as铆ncronas.Bye .then

azucar sint谩ctico 馃槀

Gracias por esta clase, estuvo excelente, acabe de entender lo que no entendia en cursos anteriores.

Aqui les dejo muy buena documentaci贸n sobre el tema por si quieren profundizar un poco.
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/funcion_asincrona

Comparto este link que complementa bien estas clases de asincron铆a:

https://medium.com/@jmz12/callbacks-promesas-y-async-await-que-alguien-me-explique-514137cb57e2

Tambi茅n les recomiendo el curso de asincronismo con javascript excelente curso con el profesor Oscar Barajas
https://platzi.com/clases/asincronismo-js/

Tremenda Clase

Excelente! Me qued贸 super claro.

Al fin pude entender todo lo de asincron铆a con este profesor.

Utilizar la palabra clave async en una funci贸n, autom谩ticamente hace que esa funci贸n retorne una promesa. Por lo que es posible usar el m茅todo .then para una funci贸n async que mandar谩 como par谩metro lo que 鈥渞etorne鈥.

const asincrona = async () => {

  await Promise.resolve()

  return true
}

asincrona()
  .then(console.log) // true

Cuando el profesor hizo as铆ncronas las funciones que ya regresaban una Promesa, solo las hizo redundantes porque de una forma u otra iban a regresar una Promesa.

async function hola(nombre){
    await (
        setTimeout(function() {
            console.log(`Hola ${nombre}`);
        },1000)
    )
}
async function hablar(){  
    await (
        setTimeout(function() {
            console.log('Bla bla bla...');
        },1500)
    );
}
async function adios(nombre){
    await (
        setTimeout(function() {
            console.log(`Adios ${nombre}`);
        },2000)
    );
}

hola('facu');
hablar();
hablar();
adios('facu');

Como dato curioso, podemos convertir setTimeout en una funci贸n mas elegante con async / await

const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const miFuncion = async () => {
	await sleep(2000); //Esto funciona igual que setTimeout
	console.log('hola mundo')
}

miFuncion()

Al fin estoy empezando a entender !!!

Vamos comprendiendo mucho mucho m谩s 馃槂

Una de las ventajas es el tema de ir enviado datos entre funciones.
Con .then se tenia que enviar a cada hablar() incluso si no utilizaba, para que adi贸s la utilice.
Ahora, solo recuperamos el valor del resolve y lo podemos utilizar donde queramos.

Profesor pero al poner async ya no es necesario retornar un new Promise ya que precisamente lo que hace async hacer que a la funci贸n que se le coloque por delante va retornar un AsyncFunction.

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/async_function

Las promesas tienen una gran funcionalidad a la hora de trabajar con funciones as铆ncronas. Sin embargo, todo este proceso sigue siendo as铆ncrono. Y no nos permite ir haciendo

La sintaxis Async Await nos va a permitir definir una funci贸n de forma expl铆cita como funci贸n as铆ncrona y poder esperar a que esa funci贸n termine. No va a bloquear el hilo principal y nos permitir谩 hacer otras actividades en paralelo.

Sintaxis de Async Await

Para declarar una funci贸n as铆ncrona con la sintaxis de Async Await lo hacemos de la siguiente manera

//declaramos la funci贸n as铆ncrona
async function myFunction() {
	//esperamos a que esta funci贸n se ejecute para terminar la funci贸n principal
  await anotherFunction();
}
// La llamamos de la siguiente manera
myFunction();

De esta manera, myFunction es una funci贸n que funcionar谩 de manera as铆ncrona y no bloquear谩 el hilo principal, esperar谩 hasta que todos sus procesos con await terminen de ejecutarse para terminar de ejecutarse.

Ejemplo con c贸digo

Ahora veremos como podemos usar Async/Await para retornar promesas que est谩n definidas en otras funciones.

Async Await nos permite llamar las promesas de manera elegante sin tener que usar .then y .catch, incluyendo un proceso que aparentemente es as铆ncrono pero que realmente controlamos como est谩 sucediendo. Lo realmente as铆ncrono aqu铆 es la funci贸n que esperar谩 a que cada proceso se ejecute para poder terminar.

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");

Utilizamos la sintaxis de Async Await para crear una funci贸n as铆ncrona que espera a que las dem谩s funciones declaradas con await se ejecuten una por una y que no bloquea el hilo principal.

De esta manera tenemos un c贸digo limpio, f谩cil y con un orden s铆ncrono que podemos establecer para trabajar la asincron铆a mejor que las promesas y los callbacks.

Veamos este proceso a profundidad

async function conversation(name) {
	//Ejecutamos directamente un console.log
  console.log("Starting async process...");
	//Esperamos a que se ejecute la funci贸n de saludar
  await sayHello(name);
	//Cuando la anterior est茅 lista, esperaremos hasta que las 3 talk se ejecuten
  await talk();
  await talk();
  await talk();
	//Esperamos a que la funci贸n de sayBye se ejecute para poder continuar con la otra
  await sayBye(name);
	//Ejecutamos directamente el console.log
  console.log("Process completed");
}

//LLamamos la funci贸n as铆ncrona
conversation("Sebastian");

asi podemos realizar con async con funcion flecha

const saludo = async (nombre) => {
    return new Promise( (resolve, reject) => {
        setTimeout( () => {
            console.log(`Hola ${nombre}, de segundo voy yo`);
            resolve(nombre);
            reject('Hay un error');
        }, 1500)

    })
}

cuando se ejecuta una funci贸n dentro de una funci贸n async, la primera funci贸n
debe ser async o no es necesario?, como por ejemplo la funci贸n hola de la clase

Hola, por si desean reforzar un poco m谩s estos conceptos de callbacks, promesas y async/await, les dejo un enlace con una muy buena expicaci贸n en el canal de Fazt:
https://www.youtube.com/watch?v=Q3HtXuDEy5s

La verdad si entendi muy bien lo que es asincronia, callbacks, asincron铆a y async await. Explica muy bien el profesor 馃槂

callback, promises y async / await la base para node js y javascript

usando async await permite ejecutar funciones en forma secuencial, aunque se tengan esten dise帽ados para ser ejecutados de forma paralelo

las promesas permites bastraerse de las sintaxis muy cargadas que pueden llegar a ser utilizando los callbacks

Tengo que agradecer a el profesor Carlos, todas las formas de asincronismo me hab铆an costado montones. Ahora todo es m谩s claro.

De los mismos cursos de la L铆nea creo que falt贸 mencionar la importancia del Bloque Try/Catch en el manejo de errores de funciones async.

馃憣

supongo que el objetivo es no bloquear el hilo, no la concurrencia.

Esta clase fue muy util

Mucho mejor entendido. M谩s claro con Async.

Excelente la explicaci贸n de async/await

Yo us茅 el siguiente c贸digo para hacer el uso del await hola()
驴Est谩 mal? 驴Bien?

(async () => {
    await hola('Jesus')
})();

驴Que prefieren usar, Async/await o Promise? y porque?

Buenisima explicacion me quito una duda grande que tenia sobre si las funciones dentro de otra se volvian asincronas

muy buena explicacion de las funciones async desde lo basico!

ahora entiendo el tema, buena explicaci贸n!!

Excelente explicaci贸n, al fin pude entender estos temas de a sincron铆a

async

Estupenda explicaci贸n instructor Carlos, quedan bien claros los conceptos base de asincronismo y c贸mo podemos usar Callbacks, Promises y Async/Await en esta serie de clases.

Esto esta tomando un buen rumbo! 馃槂

Un dato es que al manejar async/await, es recomendable usar la sintaxis try catch para manejar los errores.

En react se hacen uso de promesas y de async await (aunque de este 煤ltimo se dice que son malas pr谩cticas pero si funcionan) para los hooks

Excelente, no me quedo ni una sola duda sobre el funcionamiento b谩sico de async / await, muy buena clase y muy bien explicado por parte del profesor. Felicitaciones