No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

12 Días
16 Hrs
20 Min
21 Seg

Async/await

10/31
Recursos

Aportes 137

Preguntas 18

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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 “esperar” 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 = ‘YourName’;
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.

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 “má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

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')

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

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 está en 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();

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/

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

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

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

Hoy por fin entendí totalmente el async/await

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.

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

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

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.

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 “main” 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 “function” le ponemos la palabra reservada “async”.

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 “nombre” 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. 👏🏼

En curso de ECMAScript, se menciona una mejora para Async/await (spoiler), en es13 se libera el top Level await, por lo que la función main ya no es necesaria, se puede hacer los await en el script pricipal

Miren algo cruioso de este codigo, cuando colocamos await en la primera y ultima funcion tomas las que estan intermedias como si fuesen asincronas

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

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

async function bye(nombre) {
    return new Promise((resolve,reject)=>{
        setTimeout(() => {
            console.log(`Adios ${nombre}`);
            resolve();
        }, 1000);
    })
}
async function main (){
    let nombre = await hi('David');
    talk();
    talk();
    await bye(nombre);
    console.log('Terminamos el proceso');
}
console.log('Empezamos el proceso');
main();


// Async/await

// Asyng y await utilizados para evitar el uso de funciones dentro de funciones para evitar mucho texto

function Hello_A(name){
    return new Promise (function (resolve, reject){
        setTimeout(function() {
            console.log('Hello, ' + name);
            resolve(name);
        },1000);
        // Se utiliza en una zona la cual llegue el programa al fallar.
        // Reject('Hay un error?)
    });
}

function Conversation_A() {
    return new Promise ((resolve, reject) => {
            console.log('Bla Bla Bla..');
            resolve();
    });
}

function Goodbye_A(name){
    return new Promise (function (resolve, reject){
        setTimeout(function() {
            console.log('Goodbye, ' + name);
            resolve();
        },1000);
    });
}

//Asyng es la palabra que utlizamos antes de una funcion para denotar que utilizaremos await
//Await es la palabra que utilizamos antes de nombrar una funcion para que se vuelva sincronas y se ejecunten una tras otra

async function main(){
    let name = await Hello_A('Owen');
    for(let i = 0; i < 3 ; i++){
        await Conversation_A();
    }
    await Goodbye_A(name);
}

main();

Nota: actualmente con el estándar ECMAScript 2022 es posible usar el await por fuera de funciones asíncronas.

Profesor: Con esto podemos convertir procesos asíncronos en aparentemente asíncronos. Pero nuestra función es asíncrona.
Yo 😮

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(‘bla bla bla bla…’);
resolve();
},1000);
});
}
async function adios(nombre) {
return new Promise((resolve,reject)=>{
setTimeout(function () {
console.log(‘adios’,nombre);
resolve();
},1000);
});
}

//lo que se ejecutara…

async function main(){
let nombre =await hola(‘Carlos’);

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

}
console.log(‘Iniciando el Proceso…’)
main();

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(“Genesys is Skynet”)), 3000));
}

function main(){
future_message().then((msg) => console.log("msg: ", msg));
console.log(“Hello 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 “lindo” 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) => {
		…code
		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 = ‘Kaito-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 “…empezamos 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.

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

Tremenda Clase

El async await es muy poderoso, basicamente cuando usamos un await estamos diciendole espera hasta que esta linea de código termine para que saltes a la otra, esa línea de código puede ser mandar datos con POST a una API, esto no sabemos cuanto tarda, pero el await esperara hasta que se hayan cargado para poder mandarnos a la página principal, por ejemplo.
Async/await es una característica de JavaScript que proporciona una sintaxis más limpia y fácil de entender para trabajar con operaciones asíncronas, utilizando promesas bajo el capó. Async/await hace que el código asíncrono se parezca más al código síncrono, lo que lo hace más legible y fácil de mantener. ```js // Función simulada para obtener el nombre de un usuario function obtenerNombreUsuario(id) { return new Promise(function(resolve, reject) { setTimeout(function() { resolve("Usuario" + id); }, 1000); // Simula un retraso de 1 segundo en la obtención del nombre }); } // Función simulada para obtener los detalles de un pedido function obtenerDetallesPedido(usuario) { return new Promise(function(resolve, reject) { setTimeout(function() { resolve({ id: 1, producto: "Libro", cantidad: 2, usuario: usuario }); }, 1500); // Simula un retraso de 1.5 segundos en la obtención de los detalles del pedido }); } // Función simulada para procesar un pedido function procesarPedido(detalles) { return new Promise(function(resolve, reject) { setTimeout(function() { resolve("Pedido procesado: " + detalles.producto + " para " + detalles.usuario); }, 2000); // Simula un retraso de 2 segundos en el procesamiento del pedido }); } // Función async que encadena las operaciones utilizando async/await async function realizarProceso() { console.log("Iniciando proceso..."); try { const nombreUsuario = await obtenerNombreUsuario(123); const detallesPedido = await obtenerDetallesPedido(nombreUsuario); const resultado = await procesarPedido(detallesPedido); console.log(resultado); } catch (error) { console.error("Error:", error); } console.log("Proceso en curso..."); } // Llamar a la función async para iniciar el proceso realizarProceso(); ``` En este ejemplo, la función `realizarProceso()` es una función async que utiliza la palabra clave `await` para esperar a que se resuelvan las promesas devueltas por las funciones asíncronas `obtenerNombreUsuario()`, `obtenerDetallesPedido()` y `procesarPedido()`. Esto hace que el código sea mucho más fácil de leer y entender, ya que parece una secuencia de operaciones síncronas, a pesar de ser asíncrono en su naturaleza. La función también maneja cualquier error utilizando un bloque try-catch.

Alguien me explica la necesidad de colocar async en las funciones hola, hablar y adios? Según yo no es necesario

🕶 Codigo

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("Bla bla bla bla...");
      resolve(nombre);
    }, 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('Carlos');
    await hablar();
    hablar();
    hablar();
    await adios(nombre);
console.log('Termina el proceso...');

}
console.log('Empezamos el proceso...');
main();
console.log('Va a ser la segunda instruccion que se ejecute');
Por que se sigue utilizando en setimeout?

Async/await

Async function

La sintaxis async/await en JavaScript proporciona una forma más limpia y legible de trabajar con código asincrónico que utiliza promesas. Al marcar una función como async, permite utilizar la palabra clave await dentro de la función para esperar que una promesa se resuelva antes de continuar con la ejecución. Aquí tienes algunos ejemplos de cómo usar async/await:

Ejemplo de Uso Básico:

async function obtenerDatos() {
  try {
    const respuesta = await fetch('<https://jsonplaceholder.typicode.com/posts/1>');
    const datos = await respuesta.json();
    console.log('Datos:', datos);
  } catch (error) {
    console.error('Error:', error);
  }
}

obtenerDatos();

En este ejemplo, la función obtenerDatos es marcada como async. Utilizamos await para esperar a que la promesa de la solicitud fetch se resuelva y luego a la promesa de la conversión de la respuesta a JSON. Esto hace que el código sea más secuencial y legible.

Uso de async/await con Promesas Encadenadas:

async function operacionesEncadenadas() {
  try {
    const resultado1 = await operacionAsincronica1();
    console.log(resultado1);

    const resultado2 = await operacionAsincronica2();
    console.log(resultado2);
  } catch (error) {
    console.error('Error:', error);
  }
}

async function operacionAsincronica1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Primera operación completada');
    }, 1000);
  });
}

async function operacionAsincronica2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Segunda operación completada');
    }, 1000);
  });
}

operacionesEncadenadas();

En este ejemplo, utilizamos async/await para esperar que varias promesas se resuelvan en secuencia, lo que hace que el código sea más legible y estructurado.

Uso de async/await con Promise.all:

async function obtenerDatosConPromiseAll() {
  try {
    const promesa1 = fetch('<https://jsonplaceholder.typicode.com/posts/1>');
    const promesa2 = fetch('<https://jsonplaceholder.typicode.com/posts/2>');

    const [respuesta1, respuesta2] = await Promise.all([promesa1, promesa2]);

    const datos1 = await respuesta1.json();
    const datos2 = await respuesta2.json();

    console.log('Datos 1:', datos1);
    console.log('Datos 2:', datos2);
  } catch (error) {
    console.error('Error:', error);
  }
}

obtenerDatosConPromiseAll();

En este ejemplo, utilizamos Promise.all junto con async/await para realizar múltiples solicitudes de manera simultánea y luego esperar a que se resuelvan.

async/await es especialmente útil para simplificar el código asincrónico y hacerlo más comprensible, lo que facilita el manejo de operaciones asincrónicas en JavaScript.

async function hello(userName) {
    return new Promise( (resolve, reject) => {
        setTimeout(function () {
            console.log('Hello', userName)
            resolve(userName);
        }, 1000);
    });
};

async function speak(userName) {
    return new Promise ( (resolve, reject) => {
        setTimeout ( function () {
            console.log('I am speaking something, blah blah blah');
            resolve(userName);
        }, 1000);
    });
};

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

async function main() {
    let userName = await hello('Carlos');
    await speak();
    await speak();
    await speak();
    await speak();
    await speak();
    await bye(userName);
    console.log('Process finished')

}
console.log('Process started')
main();
let algo = async ()=>{
    console.log('Primero')
    await ((async ()=>{return new Promise ((resolve, reject)=>{setTimeout(()=>{console.log('Segundo');resolve()} ,1000)}) })()) //xd
    console.log('Tercero')
}

algo()
const hello = (name) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Hello ${name}`)
            resolve(name)
        }, 1000)
    })
}

const speak = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Bla bla bla`)
            resolve()
        }, 1000)
    })
}

const goodbye = (name) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Goodbye ${name}`)
            resolve(name)
        }, 1000)
    })
}

const main = async () => {
    let name = await hello('jsdnlb')
    await speak()
    await speak()
    await goodbye(name)
    console.log('App completed')
}

// Execution
console.log('Start App')
main()
console.log('Other process executed immediately after starting')

(async (name) => {
  console.log('Iniciando el proceso..')
  await hola(name)
  await hablar(name)
  await adios(name)
  console.log('Termina el proceso..')
})('Async/Await')

Me gusta la estrategia del prof Carlos de enseñar las 3 herramientas para manejar asincronismo a partir del mismo ejemplo; así se puede distinguir las diferencias y semejanzas entre ellas. También me gusta cuando el prof dice que todo es Muy, muy, muy sencillo… deja una sensación de control y dominio que contagia.

Async / Await

Escribí este código y me gustó mucho porque simula muy bien un proceso asíncrono. Puedes copiarlo y correrlo para que observes el comportamiento de las promesas, usé un número random para que fuera dinámico.

function promesa() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const randomNumber = Math.floor(Math.random() * 2) + 1;
            randomNumber === 1 ? resolve('success'): reject('failure');
        },2000);
    });
}

async function main () {
    try {
        const resultado = await promesa();
        console.log(resultado);
    } catch (err) {
        console.log(err);
    }
}

setInterval(main, 3000);

Una mejora a todo esto (callbacks, promesas), es usar async await. Consiste en crear una función declarada como asíncrona y dentro de esta, invocar las funciones asíncronas una de tras de la otra, para que la segunda espere a que la primera se ejecute y termine, y así sucesivamente. El async await funciona en conjunto con las promesas.

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

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

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

async function main(nombre) 
{
   console.log('Iniciando proceso..'); 
   await hola(nombre); 
   await hablar(nombre);
   await hablar(nombre);
   await hablar(nombre);
   await hablar(nombre);
   await adios(nombre);
   console.log('Terminando proceso');
}
    
main("Willie");

Async y Await detienen el proceso y esperan a que se resuelva la promesa pero hay que tener en cuenta que detienen el proceso dentro de la función donde son invocados, todo lo que ocurre fuera de dicha función sigue siendo asincrono y no espera a que se termine de resolver la promesa.

Realmente y para que quede más claro, una función se marca como async cuando internamente llama a otra función asincrona, esto para que el código que haga llamado dicha función marcada como async sepa que hay algo asincrono ejecutandose, algo que puede esperar o que aún seguirá en el event loop cuando se termine el llamado de la función marcada.

ojala todos los profes de platzi tuvieran una metodología como la de este profe, se le entiende hasta lo que no dice. que heavy!

/*
EL OBJETIVO DE ESTA PRÁCTICA ES EMULAR TODO LO APRENDIDO HASTA EL MOMENTO CON NODE JS Y ASINCRONISMO
TODO: Código básico para emular la obtención, lectura, escritura y registro de información
* Se debe tener en cuenta que este de funcionamiento es del tipo asíncrono, pero que se debe ejecutar de manera “secuencial” para que todo este proceso se ejecute de manera correcta
*/

// OBTENIENDO EL REGISTRO
let dbFiles = [
{
nombre: “Bremdow”,
direccion: “Desconocido”,
edad: new Date().getFullYear() - 1996
},
{
nombre: “Nancy”,
direccion: “Paradero Aeropuerto”,
edad: new Date().getFullYear() - 1972
},
{
nombre: “Yenifer”,
direccion: “Avp. Wimpillay”,
edad: new Date().getFullYear() - 1995
}
]

function obtenerRegistro(id){

return new Promise( (resolve, reject) => {
    setTimeout( () => {
        console.log("1. Obteniendo el registro ...")
        resolve(id)
    }, 1000)
})

}

function lecturaRegistro(id){
return new Promise( (resolve, reject) => {
console.log(“2. Desencriptando los datos …”)
setTimeout(()=>{
let personalData = Nombre: ${dbFiles[id].nombre} Dirección: ${dbFiles[id].direccion} Edad: ${dbFiles[id].edad}
console.log(personalData)
resolve(id)

    }, 3000)
})

}

function escrituraRegistro(id){
return new Promise( (resolve, reject) => {
setTimeout( () => {
console.log(3. Usuario ${dbFiles[id].nombre} los registros se modificaron correctamente)
resolve(id)
}, 500)
})
}

function guardarRegistro(id){
return new Promise( (resolve, reject) => {
setTimeout( () => {
console.log(4. Registros guardados para ${dbFiles[id].nombre})
console.log(“5. Finalizando la conexión”)
}, 1000)
})
}

// LO QUE NORMALMENTE PASABA EN UNA FUNCIÓN ASINCRONA

// saludar(“nombre”, () =>{
// código para el callback
// console.log(nombre)
// })

// EJECUTANDO EL ASINCRONISMO MEDIANTE PROMESAS
console.log(“Start Process”)
// [parametros] [then() para llamar al callback]
/*
En then definimos el callback a ejecutar
*/
// El parametro es accessible desde todos los then()

// FILE
obtenerRegistro(1)
.then( (id)=>{
return lecturaRegistro(id)
})
.then( (id) => {
return escrituraRegistro(id)
})
.then( (id) => {
guardarRegistro(id)
console.log(“End Process”)
})

// FILE 1
async function main(){
let idFile = await obtenerRegistro(0)
await lecturaRegistro(idFile)
await escrituraRegistro(idFile)
await guardarRegistro(idFile)
console.log(“End Process”)
}

main()

Async / await

En ES2017 se introducen las palabras clave async/await, que no son más que una forma de azúcar sintáctico para gestionar las promesas de una forma más sencilla. Con async/await seguimos utilizando promesas, pero abandonamos el modelo de encadenamiento de .then() para utilizar uno en el que trabajamos de forma más tradicional.

La palabra clave async
En primer lugar, tenemos la palabra clave async. Esta palabra clave se colocará previamente a function, para definirla así como una función asíncrona, el resto de la función no cambia:

funcion_asincrona = async () => {
  return 42;
}

Al ejecutar la función veremos que ya nos devuelve una Promise que ha sido cumplida, con el valor devuelto en la función (en este caso, 42). De hecho, podríamos utilizar un .then() para manejar la promesa:

funcion_asincrona().then(value => {
  console.log("El resultado devuelto es: ", value);
});

Sin embargo, veremos que lo que se suele hacer junto a async es utilizar la palabra clave await, que es donde reside lo interesante de utilizar este enfoque.

La palabra clave await
Cualquier función definida con async, o lo que es lo mismo, cualquier Promise puede utilizarse junto a la palabra clave await para manejarla. Lo que hace await es esperar a que se resuelva la promesa, mientras permite continuar ejecutando otras tareas que puedan realizarse:

funcion_asincrona = async () => {
  return 42;
}

const value = funcion_asincrona();             // Promise { <fulfilled>: 42 }
const asyncValue = await funcion_asincrona();  // 42

Observa que en el caso de value, que se ejecuta sin await, lo que obtenemos es el valor devuelto por la función, pero «envuelto» en una promesa que deberá utilizarse con .then() para manejarse. Sin embargo, en asyncValue estamos obteniendo un tipo de dato , guardando el valor directamente ya procesado, ya que await espera a que se resuelva la promesa de forma asíncrona y guarda el valor.

Esto hace que la forma de trabajar con async/await, aunque se sigue trabajando exactamente igual con promesas, sea mucho más fácil y trivial para usuarios que no estén acostumbrados a las promesas y a la asincronía en general, ya que el código «parece» síncrono.

Async/Await: Nos permite ejecutar en orden las promesas. Aunque también depende en como estemos declarando nuestro código. Ej.

async function item(){
  setTimeout(() => {
    console.log('Finalizado');	
  }, 1000)
 }
 async function main(){
   console.log(3);
   await item();
 }

 console.log(1) 
 main();
 console.log(2)

 /*
 1
 3
 2
 Finalizado
Esto es porque console es sincrono, al pasar por main detecta que es asincrono, y como la primera declaracion es sincrono lo imprime. La segunda declaracion dentro de await hace que lo mande en event queue, saltando al console.log(2).  y posteriormente se ejecuta el item.
 */

En cambio si cambiamos el orden en main, declaramos primero el await, automaticamente pasara a event queue.

async function item(){
  setTimeout(() => {
    console.log('Finalizado');	
  }, 1000)
 }
 async function main(){
   await item();
   console.log(3);
 }
 console.log(1) 
 main();
 console.log(2)

/*
 1
 2
 3
 Finalizado
 */

It’s cool !

Les dejo mi código con el que esta debbugeando y experimentando por si quieren revisar y comentar… son las 2am así que sé que tan coherente sea XD

	//----------------------------------ejemplo de asincronia
	//implementacion
	console.log('inicio proceso')
	let contadorPrint = 0 //REQUIERE QUE SEA SUPER GLOBAL //ni siquiera dentro de una fn-anonima junto a main()   ()()
	main('Alvaro')
  	.catch (error=> {
	    	console.log('Ocurrio un error')
	    	console.error(error)
	  })
	console.log('finalizo proceso sincrono')
	
	//definicion de fn
	async function main(name){
		// let contadorPrint = 0 //acá no funciono! ERROR no definido al usarse en fnPrint()
		let data = await fndb(name)
		data = await fnPrint(data)
		data = await fnPrint(data)
		fnPrint(data) //OJO: dado q la data no cambio, se puede trabajar así
						//OJO: genera un resultado "sincrono", sin espera ////antes: data = await fnPrint(data)
		fnPrint(data) //OJO: dado qu la data no cambio, se puede trabajar así
						//OJO: genera un resultado "sincrono", sin espera ////antes:  data = await fnPrint(data)
		fnCierre(data[1]) //OJO: dado q la data no cambio, se puede trabajar así
							//OJO: genera un resultado "sincrono", sin espera
	}
	async function fndb(nombre){  //solo en esta!, sustituyendo Promise(function(resolve,reject){}) por async
			if(nombre==undefined)throw new Error("ingrese un nombre valido")
			console.log(`in-fndb_ ${nombre} realizó una peticion`)
			const waitFor = delay => new Promise(resolve => setTimeout(resolve(['_HeySoyLaData_',nombre]), delay));
				//RECORDAR que setTimeout NO retorna una promesa!!!
			var data = await waitFor(1000)	
			return data
			console.log('out-fndb_') //////esta linea no se va a ejecutar!!!!! /// a diferencia de las propesas
	}
	function fnPrint(data, callback){ //dado q recibe una promesa ya resuelta, no va a requerir await, y por tanto tampoco el async
		return new Promise(function(resolve,reject){
			contadorPrint++
			// let denegar = 4   
			// if(contadorPrint>=denegar) reject(`error imprimir en ${contadorPrint}`)
			// else{
				console.log(data[0],'.(fnPrint) #',contadorPrint)
				setTimeout(()=>{
					//console.log('Ya impreso genero otra logica, ej cierra proceso.(fnPrint)')
					resolve(data)
				},1000)
			// }
			console.log('out-fnPrint_')		
		})
	}
	function fnCierre(name){
			console.log(name,', ya finalizo proceso asincrono, gracias.(fnCierre)')
	}

	/*
		SECUENCIA:
			inicio proceso
			VM2838:in-fndb_ Alvaro realizó una peticcion
			// *** en async-aawait no se va imprimir:  VM2838:out-fndb_  ***se retorna antes
			VM2838:finalizo proceso sincrono
			VM2838:recibo data.(fndb)
			VM2838:_HeySoyLaData_ .(fnPrint) # 1
			VM2838:out-fnPrint_
			VM2838:_HeySoyLaData_ .(fnPrint) # 2
			VM2838:out-fnPrint_
			VM2838:_HeySoyLaData_ .(fnPrint) # 3
			VM2838:out-fnPrint_
			VM2838:_HeySoyLaData_ .(fnPrint) # 4
			VM2838:out-fnPrint_
			VM2838:Alvaro , ya finalizo proceso asincrono, gracias.(fnCierre)
	*/

Dado este codigo




Si comento la linea 18 y 20 (del valor del await) corre prime los ultimos console.logs de la funcion main antes de resolver la promesa

Este ejemplo de async/await podria ser mejor tomar un ejemplo de abrir archivo, cambiar nombre del archivo, leer y cerrar archivo.

Considereo que es buen maestro hasta ahora, pero estaria genial que lo que explica al principio se apoyara con alguna diapositiva o algo visual !!!

Para evitar que lo asíncrono, se vea de dicha forma, se utiliza la sintaxis Async/away, permitiendo definir una función de forma explícita como función asíncrona y poder esperar a que esa función termine.
Si se tienen funciones que son promesas, solo se le debe añadir un async delante de dicha función, lo que convertirá la función X en una función asíncrona declarada y que se puede empezar a usar con el await.
Los await deben ir dentro de una función la cual debe ser llamada para que el programa funcione correctamente.

await puede convertir procesos asíncronos a procesos aparentemente síncronos, pero la función es asíncrona

Hay que acotar que si la promesa cae en el then usando el await todo ira bien y seguira a la siguiente linea, pero si la promesa termina en un catch va la lanzar excepcion. Es por eso que en muchos caso el await va acompañado de un try/catch. como en el siguiente ejemplo:

try{
// Equivalie al .then
var result = await myPromise();
} catch(error) {
	// Equivale al .catch
	console.log('Error: ', error);

}

muy buena. vamos que vamos

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 “retorne”.

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