No tienes acceso a esta clase

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

Funciones as铆ncronas

15/26
Recursos

Aportes 66

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

馃帰 饾棖饾椆饾棶饾榾饾棽 #饾煭饾煰: 饾棛饾槀饾椈饾棸饾椂饾椉饾椈饾棽饾榾 饾棶饾榾铆饾椈饾棸饾椏饾椉饾椈饾棶饾榾 饾煭饾煰/饾煯饾煭 馃帰
.
馃攣 驴Qu茅 es una funci贸n as铆ncrona?
.
La declaraci贸n de funci贸n async define una funci贸n as铆ncrona que devuelve un objeto, lo cual permite a un programa correr una funci贸n sin congelar todo la compilaci贸n.
Dada que la finalidad de las funciones async/await es simplificar el comportamiento del uso s铆ncrono de promesas, se hace m谩s f谩cil escribir promesas.
.
馃攺 La estructura se compone por las palabras reservadas async y await:
.

  1. La palabra async antes de la funci贸n, hace que la funci贸n devuelva una promesa.
  2. La palabra await se utiliza dentro de las funciones async, lo que hace que el programa espere hasta que la variable(promesa) se resuelva para continuar.
    .

鉁忥笍 Ejemplo con c贸digo:
.

  • Ir a VSC, crear dentro de la carpeta src una carpeta llamada async.
  • En la ruta src/async crear el archivo index.js

Dentro del archivo index.js, se crea la promesa y luego se valida si la promesa se resolver谩, tambi茅n se hace el llamado de la misma y luego se busca mostrar como se desenvuelve con await. En el ejemplo se usa el if ternario.
.

馃殽 驴Qu茅 es un operador if ternario?
.
El operador ternario consta de 3 partes: condici贸n ? expresi贸n1 : expresi贸n2;

  1. La primera es la l贸gica, se eval煤a una condici贸n.
  2. La segunda parte est谩 despu茅s del signo de cierre de interrogaci贸n ?, 茅sta se ejecuta solo si la condici贸n es verdadera true.
  3. La tercera parte est谩 despu茅s del s铆mbolo de dos puntos :, 茅sta se ejecuta solo si la condici贸n resulta falsa false.

Fuente: aqu铆
Ejemplo:

var a = 5;
var b = 3;
var c = a > b ? "Es mayor" : "Es menor";
//Si la condici贸n despu茅s del s铆mbolo igual (=) se cumple, entonces se tendr谩 el valor: 鈥淓s mayor鈥, de lo contrario tomar谩 el valor: 鈥淓s menor鈥.

El c贸digo en src/async/index.js queda as铆:

const fnAsync = () =>{
    return new Promise((resolve, reject) =>{
        (true) //se us贸 operador ternario y se est谩 forzando con true que se cumpla la condici贸n
            ? setTimeout(() => resolve('Async!!', 2000))
            : reject(new Error('Error!')); //arroja "error" en caso de que la condici贸n sea false
    });
}

const anotherFn = async () => { //la palabra async es para el cuerpo de la funci贸n
    //la palabra await estar谩 dentro de la l贸gica a implementar
    const something = await fnAsync(); //aqu铆 nos est谩 regresando una promesa
    console.log(something); //se imprime mientras se espera
    console.log('Hello!');
}

console.log('Before'); //al ser la primera orden con solo console.log, 'Before' se imprime primero
anotherFn();//es el segundo en llamar, pero a煤n as铆 no se imprimen los console de su l贸gica y tarda 2 s en ser ejecutada
console.log('After'); //aparece justo despu茅s de 'Before' porque anotherFn() est谩 esperando una promesa y a煤n as铆 el programa no se detiene, sino que sigue y as铆 tenemos 'After' de segundo al imprimir

/*La salida al correr con Run Code queda:
Before
After
Async!!
Hello!
*/

Creo que para quienes tal vez les cueste un poco entender, pueden intentar agregar un console antes de el llamado a await fnAsync para que sea un poco m谩s visual el proceso interno de la funci贸n que est谩 usando Async.

const fnAsync = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve('Async resolved!'), 2000)
            : reject(new Error('Error!'));
    });
}

const anotherFn = async () => {
    console.log('Ya la llamamos, ahora llamaremos fnAsync y esperaremos a que se resuelva')
    const something = await fnAsync();
    console.log(something);
    console.log('Listo, ya se resolvi贸 el proceso asincrono');
}

console.log('Antes de llamar anotherFn');
anotherFn();
console.log('Holaaa, me llamaron y no tengo que esperar a que termine el proceso asincrono');

El output ser铆a:

Antes de llamar anotherFn
Ya la llamamos, ahora llamaremos fnAsync y esperaremos a que se resuelva
Holaaa, me llamaron y no tengo que esperar a que termine el proceso asincrono
Async resolved!
Listo, ya se resolvi贸

Este video me ayudo a entender mejor sobre el async y await y la diferencia entre esto y las promesas

https://www.youtube.com/watch?v=rKK1q7nFt7M

Quiero compartir mi exploraci贸n

El profesor explica muy mal, no le entendi a lo que decia pero si entendi el codigo porque vi videos de YOUTUBE. Se extra帽an los cursos de Diego De Granda

馃搷 Async / Await:

Permite crear funciones as铆ncronas sin bloqueo de una manera similar a una funci贸n sincr贸nica ordinaria

Async, la usamos siempre al inicio de la funci贸n, y lo que hace es definir que esa funci贸n ser谩 asincrona

Await, la usamos b谩sicamente para indicar por cuales l铆neas de c贸digo se deben esperar a que terminen de ejecutarse antes de seguir ejecutando la funci贸n.

// Creamos una Promesa
const fnAsync = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(()=> resolve('Async!!'), 2000)
            : reject(new Error('Error!'));
    })
}

// Creamos nuesta Funci贸n Asincrona
const anotherFn = async () => {
    const somethig = await fnAsync();
    console.log(somethig);
    console.log('Hello!')
}

console.log ('Before'); // 1
anotherFn();            // 3
console.log('After')    // 2

Async & Await no bloquean la ejecuci贸n de nuestro programa, en el ejemplo, anotherFn requiere 2 segundos para devolver su resultado, pero JS no espera esos 2 segundos, sino que sigue con la ejecuci贸n, y una vez anotherFn est谩 lista, pues continua el flujo normal.

Async/Await:

  • La palabra clave async declara una funci贸n como as铆ncrona e indica que una promesa ser谩 autom谩ticamente devuelta, lo cual permite a un programa correr una funci贸n sin congelar todo la compilaci贸n.
  • Podemos declarar como async tanto funciones con nombre, an贸nimas, o funciones flecha.
  • La palabra clave await debe ser usado siempre dentro de una funci贸n declarada como async y esperar谩 autom谩ticamente (de forma as铆ncrona y no bloqueante) a que una promesa se resuelva.
  • Las palabras clave async y await surgieron para simplificar el manejo de las promesas.
  • Son puro az煤car para hacer las promesas m谩s amigables, escribir c贸digo m谩s sencillo, reducir el anidamiento y mejorar la trazabilidad al depurar.
  • async \ await y las promesas son lo mismo en el fondo.

Manejo de errores

  • Si una promesa gestionada por await es rechazada o un error se dispara dentro de la funci贸n declarada como async, la promesa que autom谩ticamente devuelve la funci贸n async tambi茅n ser谩 rechazada.
  • Con try catch se puede manejar los errores.

me gustan mas las promesas, pero bueno. Hay que aprender esta caracter铆stica de JavaScript

Datos generales sobre async await:

  • Este nuevo enfoque de ES para trabajar asincron铆a.
  • El async/await es s贸lo syntax sugar de una promesa, por debajo es exactamente lo mismo.
  • Son preferibles sobre las promesas porque hace que nuestro c贸digo se comporte s铆ncrono.
  • En lugar de usar then usamos await obtendremos un c贸digo m谩s f谩cil de leer, depurar y mantener.
  • Para convertir de then a async debemos indicar que la funci贸n es as铆ncrona con async. Esto nos va a permitir usar await.
  • Se usa await para esperar que una promesa se resuelva.

Es el maestro que mas me cuesta entender, entiendo y agradezco al diversidad de maestros, lo malo en mi caso es que no soy compatible con la forma de ense帽anza de todos y me toca leer e investigar mas, como consejo si alguien se siente as铆, es recurrir a los libros y la documentaci贸n y hacer al menos 10 ejemplos de aplicaciones simples antes de aplciarlos en proyectos personales.

Diferencias en la secuencia cuando se usan funciones as铆ncronas y cuando no se usan:

Hice un resumen con las funciones as铆ncronas que llevamos hasta ahora, espero te sirva de resumen 鉁

Recordar tambi茅n鈥 驴Como utilizar Async en diferentes estructuras?

async function funcionObjeto(parameter){}

Otra forma:

const otherFunction = async(parameter) => {}

Me ha costado entender este curso, pero leyendo los aportes de otros compa帽eros, investigando y practicando esto es lo que puedo concluir.

API (Application Programming interface):
Es una interfaz que permite la comunicaci贸n con recursos de otras aplicaciones construidas o no por nosotros.
Existen diferentes tipos y arquitecturas. El tipo de API que estamos viendo en el curso es una API WEB y La arquitectura que estamos utilizando es REST API.

REST (Representational State Transfer) : Es un est谩ndar para consumir servicios en la web y tiene un formato espec铆fico para devolver los datos, es el formato JSON.

JSON(Javascript Object Notation):Es un formato que tiene estructurada la informaci贸n de forma clave-valor.

Para consumir esos recursos se requiere un tipo de comunicaci贸n asincr贸nica, ya que la respuesta que nos env铆a el servidor tarda un tiempo en llegar.

En el curso hemos visto diferentes maneras de acceder a la FAKE API de Platzi, desde la m谩s 鈥渆ngorrosa鈥 hasta la m谩s simple:

  1. Utilizando directamente el objeto XMLHttpRequest, que es el encargado de realizar las peticiones asincr贸nicas.
  2. Utilizando del objeto Promise, que es una manera m谩s simple de realizar las peticiones as铆ncronas.
  3. Implementando Fetch. Es una manera m谩s c贸moda de realizar las peticiones con promesas.
  4. Sync 鈥 await. Es tambi茅n una manera de realizar las peticiones con promesas, pero con un c贸digo m谩s entendible.

Si estoy equivocado en algo, por fa me env铆an el comentario 馃槈

explicacion sencilla pero util, ahora veamolo en la realidad consultando una api. pej pueden probar tambien con la api de pokemon https://pokeapi.co/

Lo que hace await es esperar a que se resuelva la promesa, mientras permite continuar ejecutando otras tareas que puedan realizarse.
Por eso en este caso, aunque el console.log de before y after se ejecutaron, el 鈥渉ello鈥 no se pudo ejecutar sino hasta despues de la respuesta por parte de la promesa something

Espero que este tipo de ejemplo les sirva a entender mejor la logica del async await:

const ingredientes = true;

const cocinar = () => {
    return new Promise((resolve, reject) => {
        (ingredientes)
            ? setTimeout(() => resolve('Se termino de preparar el pedido'), 2000)
            : reject(new Error('No se pudo prepara el pedido por que no se tiene los ingredientes'));
    });
};

const prepararPedido = async () => {
    const pedido = await cocinar();
    console.log(pedido);
    console.log('Entrega tu pedido');
};

console.log('recibir tu pedido');
prepararPedido();
console.log('Entregando pedido al cliente anterior ')

para entender mejor las Promesas

Promises - Hola Mundo

Es incre铆ble que un video de Youtube, lo explique con m谩s detalle, con varios ejemplos y mucho mejor, que una "plataforma de educaci贸n profesional" <https://www.youtube.com/watch?v=Q3HtXuDEy5s&ab_channel=Fazt>

15/26 Curso de Asincronismo: Funciones as铆ncronas

En JavaScript, las funciones as铆ncronas son una caracter铆stica que te permite escribir c贸digo que se ejecuta de manera as铆ncrona, lo que significa que no bloquea la ejecuci贸n del programa principal. Esto es especialmente 煤til cuando se trabaja con operaciones que pueden llevar tiempo, como solicitudes de red, lecturas/escrituras de archivos o cualquier tarea que pueda ser bloqueante.

Para declarar una funci贸n as铆ncrona, simplemente agrega la palabra clave async antes de la palabra clave function al definir la funci贸n. Aqu铆 tienes un ejemplo de una funci贸n as铆ncrona:

async function miFuncionAsincrona() {
  // C贸digo as铆ncrono aqu铆
}


Dentro de una funci贸n as铆ncrona, puedes utilizar la palabra clave await para esperar la finalizaci贸n de una promesa. Las promesas son objetos que representan valores que pueden estar disponibles ahora, en el futuro o nunca. Al usar await dentro de una funci贸n as铆ncrona, la ejecuci贸n de la funci贸n se pausar谩 hasta que la promesa se resuelva o se rechace.

Aqu铆 hay un ejemplo que muestra c贸mo usar await dentro de una funci贸n as铆ncrona para esperar la resoluci贸n de una promesa:

async function obtenerDatos() {
  try {
    const respuesta = await fetch('https://api.ejemplo.com/datos');
    const datos = await respuesta.json();
    console.log(datos);
  } catch (error) {
    console.error('Ocurri贸 un error:', error);
  }
}

obtenerDatos();


En este ejemplo, fetch es una funci贸n que devuelve una promesa para realizar una solicitud HTTP. Usamos await para esperar a que la solicitud se complete y luego usamos await nuevamente para esperar a que se resuelva la promesa que devuelve response.json().

Es importante tener en cuenta que solo puedes usar await dentro de una funci贸n declarada como async. Adem谩s, las funciones as铆ncronas siempre devuelven una promesa, por lo que puedes usar .then() y .catch() para manejar el resultado o el error cuando se llama a una funci贸n as铆ncrona.

En resumen, las funciones as铆ncronas y await son una forma poderosa de trabajar con c贸digo as铆ncrono en JavaScript, lo que hace que sea m谩s f谩cil manejar operaciones que requieren tiempo, como llamadas a la red o lecturas/escrituras de archivos, de manera m谩s legible y mantenible.


Veamos el ejemplo de la clase paso a paso:

const fnAsync = () => {
  return new Promise((resolve, reject) => {
    true
      ? setTimeout(() => resolve("Async!!"), 2000)
      : reject(new Error("Error!"));
  });
};

const anotherFn = async () => {
  const something = await fnAsync();
  console.log(something);
  console.log("Hello!");
};

console.log("Before");
anotherFn();
console.log("After");
  1. Tienes una funci贸n llamada fnAsync que devuelve una promesa. Dentro de esta funci贸n, hay un temporizador (setTimeout) que resuelve la promesa despu茅s de 2000 milisegundos (2 segundos) con la cadena 鈥溌sync!鈥 si la condici贸n true se cumple o la rechaza con un error si la condici贸n es false.

  2. Luego, tienes otra funci贸n llamada anotherFn que es una funci贸n as铆ncrona. Dentro de esta funci贸n, se espera a que la promesa devuelta por fnAsync se resuelva. Cuando la promesa se resuelve, el valor resultante se almacena en la variable something. Luego, se imprime something en la consola y se muestra 鈥溌ello!鈥 en la consola.

  3. Fuera de las funciones, tienes tres l铆neas de c贸digo que imprimen 鈥淏efore鈥, 鈥淎fter鈥 y llaman a anotherFn. Notar谩s que 鈥淏efore鈥 se imprimir谩 antes de que anotherFn se ejecute, y 鈥淎fter鈥 se imprimir谩 antes de que anotherFn complete su ejecuci贸n. Esto se debe a la naturaleza as铆ncrona de las promesas y las funciones as铆ncronas en JavaScript.


En resumen, el orden de salida en la consola ser谩:

Before
After
Async!!
Hello!


Esto se debe a que 鈥淏efore鈥 y 鈥淎fter鈥 se imprimen de inmediato, mientras que 鈥淎sync!!鈥 se imprime despu茅s de que la promesa en fnAsync se resuelve (2 segundos despu茅s) y 鈥淗ello!鈥 se imprime despu茅s de eso, ya que es parte de la funci贸n anotherFn que se llama despu茅s.

Espero sea de utilidad. 馃懆鈥嶐煉

馃崈 Este c贸digo demuestra c贸mo trabajar con funciones as铆ncronas en JavaScript, espec铆ficamente con el uso de promesas y el uso de la palabra clave async en combinaci贸n con await. Aqu铆 te explico el c贸digo paso a paso:

  1. Se define una funci贸n fnAsync que retorna una nueva promesa. Dentro de la promesa, se utiliza un operador ternario para verificar si la promesa debe resolverse con el valor 鈥淎sync!!鈥 despu茅s de 2 segundos mediante el uso de setTimeout, o si debe rechazarse con un nuevo objeto Error.

    const fnAsync = () => {
    	return new Promise((resolve, reject) => {
    		true
    			? setTimeout(() => resolve("Async!!"), 2000)
    			: reject(new Error("Error!"));
    	});
    };
    
  2. Se define una funci贸n anotherFunction como as铆ncrona, lo que significa que retorna una promesa autom谩ticamente. Dentro de esta funci贸n, se utiliza la palabra clave await para esperar a que se resuelva la promesa retornada por la funci贸n fnAsync. Luego, se muestra en consola el valor resuelto de la promesa y se muestra el mensaje 鈥淗ello!鈥.

    const anotherFunction = async () => {
    	const something = await fnAsync();
    	console.log(something);
    	console.log("Hello!");
    };
    
  3. Se muestra en la consola el mensaje 鈥淏efore鈥.

    console.log("Before");
    
  4. Se llama a la funci贸n anotherFunction la cual es una funci贸n as铆ncrona, y por lo tanto retorna una promesa que se resolver谩 cuando termine de ejecutarse la misma. Luego se muestra en la consola el mensaje 鈥淎fter鈥.

    anotherFunction();
    console.log("After");
    

En resumen, este c贸digo demuestra c贸mo trabajar con funciones as铆ncronas en JavaScript utilizando promesas y la palabra clave async en combinaci贸n con await. La funci贸n fnAsync retorna una nueva promesa que se resuelve o rechaza despu茅s de 2 segundos, y la funci贸n anotherFunction espera a que se resuelva la promesa retornada por fnAsync antes de continuar con su ejecuci贸n.

pens茅 que el console.log a something iba a mostrar algo diferente, un espacio en blanco y despu茅s mostraba la info o un null y lo mostraba.

const fnAsync = () => {
  return new Promise((resolve, reject) => {
    true
      ? setTimeout(() => resolve("Async!!"), 2000)
      : reject(new Error("Error!"));
  });
};

const AnotherFn = async () => {
  // la funcion espera a que se termine de ejecutar something
  const something = await fnAsync();
  console.log(something);
  console.log("Hello");
};

console.log("Before");
AnotherFn();
console.log("After");


Con todo respeto, el profe me recuerda a Cantinflas, no puede colar tantas palabras incoherentes en la explicaci贸n! Confunde much铆simo!!!
![](https://static.platzi.com/media/user_upload/code-2-752c34ed-d7d9-4ffd-8720-0d43319fae24.jpg)
Esta mal dicho, await si bloquea el contexto en el que se esta ejecutando la funci贸n, lo que sucede es que hay que recordar el concepto del callstack, las promesas estan en un MicrotaskQueue donde tienen que esperar que se ejecute todo lo que hay cargado en el hilo principal antes de ejecutarse. pero despu茅s del hilo principal, todo lo que esta despu茅s de un await debe esperar obligatoriamente antes de ejecutarse, es decir, es como si se a帽adiera en el microtask despues de la promesa!
Este video me ayudo a comprender un poco m谩s lo que se lleva hasta el momento, quiz谩s tambi茅n te sirva :) <https://www.youtube.com/watch?v=rKK1q7nFt7M&ab_channel=CarlosAzaustre-AprendeJavaScript>
Supongamos que est谩s desarrollando una aplicaci贸n web que muestra informaci贸n de un usuario despu茅s de cargarla desde un servidor. Podr铆as tener una funci贸n as铆ncrona `getUserData` que hace una solicitud al servidor para obtener los datos del usuario. Mientras esperas la respuesta del servidor, puedes mostrar un mensaje de carga al usuario. Una vez que los datos del usuario se han cargado, actualizas la interfaz de usuario con esos datos. ```js // Simulaci贸n de una funci贸n que obtiene los datos del usuario desde el servidor const getUserData = () => { return new Promise((resolve, reject) => { // Supongamos que aqu铆 hacemos una solicitud al servidor para obtener los datos del usuario setTimeout(() => { const userData = { name: 'John Doe', email: '[email protected]', age: 30 }; resolve(userData); }, 2000); // Simulando una demora de 2 segundos en la respuesta del servidor }); } // Funci贸n para mostrar los datos del usuario en la interfaz de usuario const displayUserData = async () => { try { // Muestra un mensaje de carga mientras se obtienen los datos del usuario showLoadingMessage(); // Espera a que se obtengan los datos del usuario const userData = await getUserData(); // Una vez que se obtienen los datos, actualiza la interfaz de usuario con esos datos updateUI(userData); // Oculta el mensaje de carga hideLoadingMessage(); } catch (error) { console.error('Error al obtener los datos del usuario:', error); // Manejo de errores, por ejemplo, mostrar un mensaje de error al usuario showErrorMessageBox(); } } // Mostrar un mensaje de carga en la interfaz de usuario const showLoadingMessage = () => { // C贸digo para mostrar un mensaje de carga en la interfaz de usuario } // Actualizar la interfaz de usuario con los datos del usuario const updateUI = (userData) => { // C贸digo para actualizar la interfaz de usuario con los datos del usuario } // Ocultar el mensaje de carga de la interfaz de usuario const hideLoadingMessage = () => { // C贸digo para ocultar el mensaje de carga en la interfaz de usuario } // Mostrar un mensaje de error al usuario en caso de fallo al obtener los datos del usuario const showErrorMessageBox = () => { // C贸digo para mostrar un mensaje de error al usuario en la interfaz de usuario } // Llamada a la funci贸n principal para mostrar los datos del usuario cuando la p谩gina se carga displayUserData(); ```
Todo iba bien hasta esta clase, donde realmente no entendi nada de lo que dice, el ejemplo es confuso, y no tiene ningun sentido o importancia.
Recuerden darle una revisada a la documentaci贸n, de mi parte encontr茅 esto que me pareci贸 interesante (tal vez puede confundir un poco al principio pero muestra el alcance y las variaciones que puede tener las async funciton): Una expresi贸n **async function** es muy similar, y casi tiene la misma sintaxis que una **async\_function\_statement.** La principal diferencia entre una **expresi贸n async function** y un **enunciado async function** es el nombre de la funci贸n, que puede ser omitido en una expresi贸n **async function** para crear funciones anonymous. Una expresi贸n **async function** puede ser utilizada como un **IIEFE** (Expresi贸n de funci贸n inmediatamente invocada, Immediately Invoked Function Expression) que se ejecuta tan r谩pido como es definida. Es posible definir tambi茅n funciones as铆ncronas a trav茅s de una **expresi贸n de funci贸n async.** `function resuelve2SegundosDespues(``x``) {` `聽聽return ``new`` ``Promise``((``resolve``) => {` `聽聽聽聽setTimeout(() => {` `聽聽聽聽聽聽resolve(x);` `聽聽聽聽}, 2000);` `聽聽});` `}` `const agregar = async function (``x``) {` `聽聽// Expresi贸n de una funci贸n as铆ncrona asignada a una variable` `聽聽let a = await resuelve2SegundosDespues(20);` `聽聽let b = await resuelve2SegundosDespues(30);` `聽聽return x + a + b;` `};` `agregar(10).then((``v``) => {` `聽聽console.log(v); // imprime 60 despu茅s de 4 segundos.` `});` `(async function (``x``) {` `聽聽// expresi贸n de una funci贸n as铆ncrona utilizada como una IIFE` `聽聽let p_a = resuelve2SegundosDespues(20);` `聽聽let p_b = resuelve2SegundosDespues(30);` `聽聽return x + (await p_a) + (await p_b);` `})(10).then((``v``) => {` `聽聽console.log(v); // imprime 60 despu茅s de 2 segundos.` `});`
const asyncPromise = () => {
    return new Promise((resolve, reject) => {
        (true)
        ? setTimeout(() => resolve("Funci贸n As铆ncrona"), 2000)
        : reject(new Error ("ERROR!"));
    });
};

const validate = async () => {
    console.log("Esperando respuesta...")
    // En la constante main, el await por asyncPromise solo bloquear谩 el resto del c贸digo de esta arrow function, ya que es el scope al que pertenece. Es decir, solo bloquear谩 el string "Proceso finalizado".
    const main = await asyncPromise()
    console.log(main)
    console.log("Proceso finalizado.")
};

console.log("Before");
validate();
// Si escribi茅semos await validate(); el flujo de 茅ste c贸digo dejar铆a de ser as铆ncrono ya que s铆 se detendr铆a a esperar que terminase toda la funci贸n validate para poder imprimir el resto (el string "After"), llevando as铆 un orden s铆ncrono com煤n a pesar de seguir esperando esos 2 segundos para resolver la promesa.
console.log("After"); 

/* La consola imprime

Before
Esperando respuesta...
After
Funci贸n As铆ncrona   <== 2 segundos despu茅s
Proceso finalizado.

*/

Ya sabemos que el t茅rmino as铆ncrono se refiere a una situaci贸n en la que dos o m谩s eventos no ocurren al mismo tiempo. O en t茅rminos m谩s sencillos, pueden suceder varias cosas relacionadas sin esperar a que se complete la acci贸n anterior.

En JavaScript,聽las funciones as铆ncronas聽son muy importantes debido a la naturaleza de聽un solo subproceso de JavaScript. Con la ayuda de funciones as铆ncronas, el bucle de eventos de JavaScript puede encargarse de otras cosas cuando la funci贸n solicita alg煤n otro recurso.

Usar铆as un c贸digo as铆ncrono, por ejemplo, en las API que obtienen un archivo de la red, cuando accedes a una base de datos y devuelves datos de ella, cuando accedes a una transmisi贸n de video desde una c谩mara web, o si est谩s transmitiendo la pantalla a un headset de realidad virtual.

Conceptos b谩sicos de Async / Await en JavaScript

Tenemos dos partes cuando usamos聽async/await聽en nuestro c贸digo.

En primer lugar, tenemos la palabra clave聽async聽, que se pone delante de una declaraci贸n de funci贸n para convertirla en una funci贸n async.

Una funci贸n as铆ncrona es una funci贸n que sabe que es posible que se use la palabra clave 聽await聽dentro de ella para invocar c贸digo as铆ncrono.

La palabra clave聽async聽se a帽ade a las funciones para que devuelvan una promesa en lugar de un valor directamente.

const loadData = async () => {
  const url = "https://jsonplaceholder.typicode.com/todos/1";
  const res = await fetch(url);
  const data = await res.json();
  console.log(data);
};
loadData();
// output en la consola
{
  completed: false,
  id: 1,
  title: "delectus aut autem",
  userId: 1
}
*AQU脥 UN EXPLICACI脫N M脕S:* ***Async/await*** es una caracter铆stica de JavaScript que se utiliza para simplificar y mejorar la legibilidad del c贸digo as铆ncrono. Est谩 basada en Promesas y permite escribir c贸digo asincr贸nico de una manera m谩s similar a un estilo de programaci贸n s铆ncrono. Aqu铆 te explico c贸mo funciona: 1. ***Funciones As铆ncronas (async):*** Para marcar una funci贸n como as铆ncrona, se utiliza la palabra clave async antes de la definici贸n de la funci贸n. Esto significa que la funci贸n retornar谩 una Promesa autom谩ticamente y permitir谩 el uso de await dentro de ella. Por ejemplo: `async function miFuncionAsincrona() {` ` // C贸digo as铆ncrono aqu铆` `}` 1. ***Operador await:*** Dentro de una funci贸n marcada como async, puedes utilizar el operador ***await*** para esperar a que una Promesa se resuelva antes de continuar con la ejecuci贸n. Esto evita la necesidad de usar callbacks o encadenar ***.then()*** para manejar Promesas. Por ejemplo: `async function obtenerDatos() {` `const resultado = await realizarSolicitudAsincronica();` `// Continuar con el c贸digo despu茅s de que la Promesa se resuelva` `}` El c贸digo se pausar谩 en la l铆nea con ***await*** hasta que la Promesa ***realizarSolicitudAsincronica()*** se resuelva, y luego continuar谩 con la siguiente l铆nea.

馃敟 Ejecuci贸n del ejemplo hecho en clase

function fnAsync() {
	return '3. Third'
}

const anotherFn = async() => {
	const response = await fnAsync();
	console.log(response);
	console.log('4. The end!!!');
}

console.log('1. First');
anotherFn();
console.log('2. Second');

// Obtenemos: 
1. First
2. Second
3. Third
4. The end!!!

Esto ha estado m谩s f谩cil 馃槃

15/26 Funciones as铆ncronas
Imagina que tienes una lista de tareas para hacer en tu casa. Algunas de estas tareas toman tiempo en completarse, como lavar los platos o hacer limonada. Mientras esperar a que se terminen estas tareas, puedes hacer otras cosas en tu casa, como ver televisi贸n o leer un libro.

En programaci贸n, una funci贸n as铆ncrona es similar. Es una funci贸n que puede realizar tareas que llevan tiempo en completarse y, mientras espera a que se terminen, permite que otras partes de tu programa sigan ejecutandose

async function hacerTarea() {
  // Realizar alguna tarea as铆ncrona aqu铆, como descargar un archivo

  // Esperar a que la tarea se complete
  await espera();

  // Continuar con el resto del c贸digo
  console.log('La tarea se ha completado');
}

hacerTarea();
console.log('El programa contin煤a...');

Creamos una funci贸n llamada hacerTarea y la definimos como async. Esto indica que la funci贸n es as铆ncrona y puede contener operaciones que llevan tiempo en completarse.

Dentro de la funci贸n hacerTarea realizamos una tarea as铆ncrona (representada por la funci贸n espera) utilizando la palabra clave await. Esto hace que la ejecuci贸n de la funci贸n se detenga temporalmente hasta que la tarea as铆ncrona se complete

Despu茅s de esperar, continuamos con el resto del c贸digo dentro de la funci贸n y mostramos un mensaje en la consola.

Al llamar a la funci贸n hacerTarea, podemos ver que el programa continua ejecutando el c贸digo fuera de la funci贸n, imprimiendo otro mensaje en la consola.

const persona={
nombre:鈥榗arlos iglesias鈥,
profesion:鈥業ngeniero鈥,
habilidades:{
java:6,
javascript:8,
html:9,
css:4,
php:5,
sql:5
},
aspiracion:6000000,
experiencia:3
}

const candidato= ()=>{
return new Promise((resolve,reject)=>{
if(persona.habilidades.java>=5 && persona.habilidades.javascript>=8){
setTimeout(()=> resolve(Bienvenido al proceso tus habilidades estan el rango ${persona.habilidades.java} ${persona.habilidades.javascript}),3000)
}else{
reject(new Error(鈥榣o sentimos no ap帽licas al proceso鈥));
}
})
}

const resultado = async ()=>{
const validar = await candidato();
console.log(鈥榩roceso inical鈥);
console.log(validar);
console.log(鈥榩roceso finalizado鈥);
}
resultado();


Perdon por la publicacion anterior tenia un error en la funcion setTiimeout este ya esta validando los 3 segundo


const persona={
nombre:鈥榗arlos iglesias鈥,
profesion:鈥業ngeniero鈥,
habilidades:{
java:6,
javascript:8,
html:9,
css:4,
php:5,
sql:5
},
aspiracion:6000000,
experiencia:3
}

const candidato= ()=>{
return new Promise((resolve,reject)=>{
if(persona.habilidades.java>=5 && persona.habilidades.javascript>=8){
resolve(Bienvenido al proceso tus habilidades estan el rango ${persona.habilidades.java} ${persona.habilidades.javascript});
setTimeout(resolve(),1000)
}else{
reject(new Error(鈥榣o sentimos no ap帽licas al proceso鈥));
}
})
}

const resultado = async ()=>{
const validar = await candidato();
console.log(validar);
console.log(鈥榩roceso inical鈥);
}
resultado();

Que genial estuvo esta clase, tan bien explicado este concepto que en lo personal pensaba que dominaba y termin茅 aprendiendo mucho m谩s. 馃槂

Un forma m谩s f谩cil de entender con esto:

async function fnAsync() {
    await setTimeout(()=>{
        console.log("Te ejecutaste async");
    },2000);
}

console.log("Before");
fnAsync();
console.log("After");

/*
Output:
    Before
    After
    Te ejecutaste async
*/

//Primero se va a ejecutar Before y After ya que async no interrumpe el flujo de ejecuci贸n y luego de la espera de 2 segundos la funci贸n fnAsync

驴Porqu茅 el objeto promesas puede recibir una funci贸n an贸nima directamente (c贸mo se le llama, cloures o c贸mo) y qu茅 implementa por debajo el objeto promesa?

驴De qu茅 otra manera puede recibir esa funci贸n an贸nima a la antigua?

Este c贸digo define una funci贸n as铆ncrona llamada fnAsync que devuelve una promesa. La funci贸n anotherFn es async, lo que significa que el c贸digo dentro de la funci贸n se ejecutar谩 de forma as铆ncrona. La funci贸n anotherFn utiliza la palabra clave await para esperar a que la promesa devuelta por la funci贸n fnAsync se resuelva antes de seguir adelante con la ejecuci贸n del c贸digo. Una vez resuelta la promesa, imprime el valor de algo y luego imprime 鈥淗ola!鈥 en la consola. Finalmente, se imprime 鈥渁ntes鈥 y 鈥渄espu茅s鈥 en la consola para ver el orden en el que se ejecuta el c贸digo.

<code> 
// Definimos una funci贸n que devuelve una promesa
const fnAsync = () => {
  return new Promise((resolve, reject) => {
    // Si la condici贸n es verdadera, resolvemos la promesa despu茅s de 2 segundos
    // De lo contrario, rechazamos la promesa con un error
    (true)
      ? setTimeout(() => resolve('Async'), 2000)
      : reject(new Error('Error'));
  });
}

// Definimos una funci贸n as铆ncrona que llama a fnAsync
const anotherFn = async () => {
  // Esperamos a que se resuelva la promesa devuelta por fnAsync
  const something = await fnAsync();
  // Imprimimos el resultado y un saludo
  console.log(something);
  console.log('Hello!');
}

// Imprimimos un mensaje antes de llamar a anotherFn
console.log('before');
// Llamamos a anotherFn, que es una funci贸n as铆ncrona
anotherFn();
// Imprimimos un mensaje despu茅s de llamar a anotherFn
console.log('after');

Apunte en Notion

async/await es una caracter铆stica de JavaScript que te permite escribir c贸digo as铆ncrono de manera s铆ncrona, lo que puede hacer que el c贸digo sea m谩s f谩cil de leer y de entender. Permite la ejecuci贸n de c贸digo as铆ncrono de manera secuencial y s铆ncrona, sin bloquear el hilo de ejecuci贸n.

Al utilizar async/await, se utiliza el keyword async en la definici贸n de una funci贸n para indicar que la funci贸n es as铆ncrona. Dentro de la funci贸n, puedes utilizar el keyword await antes de una llamada as铆ncrona para esperar a que se complete la operaci贸n y devolver el resultado. await solo puede ser utilizado dentro de una funci贸n async.

Por ejemplo, si tienes una funci贸n as铆ncrona que devuelve una promesa:

function getResults() {
  return fetch('https://example.com/results')
    .then(response => response.json());
}

Puedes utilizar async/await para escribir el mismo c贸digo de manera m谩s f谩cil de leer:

async function getResults() {
  const response = await fetch('https://example.com/results');
  const data = await response.json();
  return data;
}

La principal diferencia entre utilizar async/await y las promesas convencionales es que el c贸digo que utiliza async/await puede parecer m谩s f谩cil de entender y leer, especialmente cuando se trata de varias operaciones as铆ncronas que necesitan ser ejecutadas de manera secuencial. En vez de utilizar callbacks y encadenamiento de promesas, el c贸digo con async/await se ve m谩s parecido a c贸digo s铆ncrono, lo que lo hace m谩s f谩cil de leer y de entender.

Por fin algo que entiendo.

Ser铆a interesante que en los cursos se de un poco de teor铆a y luego esto se baje a la pr谩ctica mostrando c贸mo funciona.

Por ejemplo: Async es la forma en que podemos indicar a js que una funci贸n se procesar谩 como si fuera en segundo plano as铆 no se interrupe el flujo de procesos posteriores.

Await es la forma que se le indica a js que se espera por el resultado que se est谩 ejecutando en la funci贸n asincrona.

En este video se explica esto pero despu茅s de 10mins.

Pareciera que al principio tenemos que pensar que esto es as铆 y punto y es raro.

Las funciones as铆ncronas son aquellas que no bloquean la ejecuci贸n del programa y permiten realizar otras tareas mientras se espera su resultado. async y await son formas de manejar y simplificar el uso de promesas en JavaScript. Aqu铆 un ejemplo:

async function waitTwoSeconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Listo despu茅s de 2 segundos');
    }, 2000);
  });
}

async function runExample() {
  console.log('Ejecutando funci贸n...');
  const result = await waitTwoSeconds();
  console.log(result);
}

runExample();

Como puedes ver, despu茅s de llamar a 鈥渞unExample鈥, se imprime 鈥淓jecutando funci贸n鈥︹ y luego, despu茅s de 2 segundos, se imprime 鈥淟isto despu茅s de 2 segundos鈥.

Esto es jodidamente util

麓麓麓javascript
const fnAsync = () => {
return new Promise((resolve, reject) => {
(true)
? setTimeout(() => resolve(鈥楢sync!!鈥), 2000)
: reject(new Error(鈥楨rro!鈥));
})
}

const anotherFn = async () => {
const something = await fnAsync();
console.log(something);
console.log(鈥楬ello!鈥);
}

console.log(鈥楤efore鈥);
anotherFn();
console.log(鈥楢fter鈥);
/*
Before
After
Async!!
Hello!
*/
麓麓麓

Tambi茅n hay algo que no se mencion贸 y es lo siguiente, espero que si me equivoque me corrigan porfa. Como dentro de la promesa hay un setTimeout esto hace que se imprima luego, pero no es precisamente porque dure 2 segundos, sino porque apesar de que javascript corra en un solo hilo, podemos tener multiples intances de javascript en el navegador y precisamente setTimeout es parte de la API del navegador que corre en otro hilo; es decir, en otra instancia. Entonces segun el Event Loop, todo aquello que sea parte de la API del navegador se ejecuta en otro hilo con una prioridad secundaria en el Call Stack, corriendo primero lo que sucede dentro de javascript como tal y luego lo del API del navegador. Se que es complejo de entender, pero les recomiendo ver como funciona el event loop antes de ver este video.

Cuando se pone un await y un then juntos.

const FnAsync = ()=> { 
    return new Promise((resolve,reject) =>{
        (true)
        ? setTimeout(()=> resolve("Async!!"),2000)
        : reject(new Error("Error!"));
    });
}
const anotherFn = async ()=>{
    const something = await FnAsync().then(x=>console.log(x));
    console.log(something);
    console.log("hello");
}

console.log("Before");
anotherFn();
console.log("after");

/* Se obtuvo la salida Salida:
Before
after
Async!!
undefined
hello
*/

ahora si elimino el await y dejo solo el then, obtengo

const FnAsync = ()=> { 
    return new Promise((resolve,reject) =>{
        (true)
        ? setTimeout(()=> resolve("Async!!"),2000)
        : reject(new Error("Error!"));
    });
}
const anotherFn = async ()=>{
    const something = FnAsync().then(x=>console.log(x));
    console.log(something);
    console.log("hello");
}

console.log("Before");
anotherFn();
console.log("after");
/*
Salida:
Before
Promise { <pending> }
hello
after
Async!!

*/

Este curso te obliga a salir de las fronteras de Platzi para aclarar ciertas tem谩ticas. En lo personal me parece enriquecedor y desafiante a la vez, a seguir para adelante!

const fnAsync = ()=>{
  return new Promise((resolve, reject)=>{
    (true)
      ? setTimeout(() => resolve('async'), 2000 )
      : reject(new Error('Error'));
  });
}

const anotherFn = async () =>{
  const something = await fnAsync();
  console.log(something);
  console.log('hello');
}

console.log('before');
anotherFn();
console.log('after')

//Asyncs y Await no bloquean la aplicacion

///como usar Asyncs//Await

//await solo trabaja dentro de funciones asincronas
/// es una forma mas elegante o mas amigble
///es 鈥榓zucar sintactico鈥 ya que lo 鈥榰nico鈥 que hace es remplazar el then
// ejemplo:

let productos = [1,2,3];
const conseguirProductos= ()=>{

        return new Promise((resolve,reject)=>{//cremos nuestra promesa
        console.log('Cargando productos...esto puede dilatar un poco');//le damos un mensaje al usuario

        setTimeout(()=>{
            resolve(productos)
        },5010);

 });
}


//esto seria usando la forma 'normal' sin el await
/*conseguirProductos()
    .then(datos=>{//en caso de que sea exitosa se ejecuta 'then'
        console.log(datos);
    });
*/    

///aqui estamos usando await pero await funciona dentro de funciones asincronas
async function getMisProd()//para indicar que es una funcion asincrona debe colocar la palabra reservada 'async'
{
    let misP= await conseguirProductos();//podriamos decir que 'await' remplaza el 'then' 
    console.log('Mira este es el resultado'+misP);
}//esto lo definimos como 'azuzar sintactia' /
//++asyncs++ a +++await+++ lo usamos en algo que tenga ver con una promesa o algo que tenga cierta latencia...


getMisProd();
const fnAsync = () => {
    return new Promise((resolve, reject) => {
        (true) //se obliga a la promesa a tener un valor resolve
            ? setTimeout (() => resolve('Async!!'), 2000) //lo que pasa si la promesa es resolve
            : reject(new Error('Error!')); //lo que pasa si la promesa es reject
    });
}

const anotherFn = async () => {
    const something = await fnAsync();
    console.log(something);
    console.log('Hello!');//se ejecutar谩 hasta que termine la funci贸n fnAsync por el await
}

console.log('Before'); //se ejecutar谩 primero
anotherFn(); //se ejecutar谩 al 煤ltimo por el timeout
console.log('After'); //se ejecuta segundo porque async no bloquea el flujo

Escrib铆 este c贸digo a manera de reto o juego para ejemplificar lo que aprendimos en clase, espero les pueda servir y ayudar a crear sus propios ejercicios o ejemplos! Saludos y muchos 茅xitos!

<code> 
const fnAsync = () => {
    return new Promise((resolve, reject) => {
        (true)
            ?
            setTimeout(() => resolve('Async!'), 1000)
            : reject(new Error('Error'));
    });
}

const fnAsync1 = () => {
    return new Promise((resolve, reject) => {
        (true)
            ?
            setTimeout(() => resolve('Async1!'), 2000)
            : reject(new Error('Error'));
    });
}
const newFunc = async () => {
    return new Promise((resolve, reject) => {
        (true)
            ?
            setTimeout(() => resolve('Sequence'), 3000)
            : reject(new Error('Error'));
    });
}
const newFunc2 = async () => {
    return new Promise((resolve, reject) => {
        (true)
            ?
            setTimeout(() => resolve('Sequence0'), 8000)
            : reject(new Error('Error'));
    });
}

const code = await fnAsync();
console.log(code);
console.log('Hello');

const code2 = await newFunc();
console.log(code2);
console.log('Hello2');

const code3 = await newFunc2();
console.log(code3);
console.log('Hello3');

const code99 = await fnAsync1();
console.log(code99);
console.log('Hello99');


console.log('code0');
newFunc();
console.log('code067');

console.log('code789');
newFunc();
console.log('code0321');

console.log('BeforeAsync');
newFunc();
console.log('AfterAsync');

console.log('code0');
newFunc();
console.log('code067');

console.log('code789');
newFunc();
console.log('code0321');

console.log('BeforeAsync');
newFunc();
console.log('AfterAsync');

console.log('code0');
newFunc();
console.log('code067');

console.log('code789');
newFunc();
console.log('code0321');

console.log('BeforeAsync');
newFunc();
console.log('AfterAsync');

console.log('End of program testing');
console.log('End of algorithm!');
console.log('....Neo');
console.log('....Follow the white rabbit... Know Thyself....end of test final!');

Funci贸n Async: Nos es una declaraci贸n que define una funci贸n 鈥淎s铆ncrona鈥 la cual devuelve un 鈥淥bjeto鈥.

a mi me salio esto:

Before
Promise { <pending> }
After
Async!!
hola
const fnAsync = () => {
    return new Promise((resolve, reject) => {
        (true)
        ? setTimeout(() => resolve('Esto es Async!!'), 3000)
        : reject(new Error('Error!!'));
    });
}

const anotherFn = async () => {
    const something = await fnAsync();
    
    console.log(something);
    console.log('Hello!!!!');
}

console.log('Before')
anotherFn();
console.log('After');
const fnAsync = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(()=> resolve('Async!!'), 2000)
            : reject(new Error('Error!'));
    })
}

const anotherFn = async ()=> {
    const somethig = await fnAsync();
    console.log(somethig);
    console.log('Hello!')
}

console.log ('Before');
anotherFn();
console.log('After')