No tienes acceso a esta clase

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

Funciones as铆ncronas

15/26
Recursos

Aportes 55

Preguntas 6

Ordenar por:

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

o inicia sesi贸n.

馃帰 饾棖饾椆饾棶饾榾饾棽 #饾煭饾煰: 饾棛饾槀饾椈饾棸饾椂饾椉饾椈饾棽饾榾 饾棶饾榾铆饾椈饾棸饾椏饾椉饾椈饾棶饾榾 饾煭饾煰/饾煯饾煭 馃帰
.
馃攣 驴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

馃搷 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.

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

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.

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

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

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 馃槈

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.

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

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

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


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. 馃懆鈥嶐煉

馃敟 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!

para entender mejor las Promesas

Promises - Hola Mundo

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