ES8: funciones asíncronas

creo que ya se me acabó mi cuota de neuronas diarias

Hola Chic@s 😃
ES8:

• Funciones asíncronas

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

“async-await” es una manera de trabajar de una forma mas cómoda con promesas, la palabra reservada “async” quiere decir que una función siempre devolverá una promesa. Ahora la palabra reservada “await”, solamente existe dentro de una función “async”, que hace que JavaScript espere hasta que la función promesa responda para continuar con el código dentro de ésta función, pero sin pausar la ejecución del siguiente código.

Para los que se les esta dificultando entender estos temas, después de indagar por varias horas, obtuve lo siguiente.

Funcion asincrona:
Una función asincrona lo que hace es aislar todo el flujo que contiene para que no intervenga en el flujo externo de la función, o sea nuestra aplicación completa. En otras palabras simula ser un HILO el cual en otros lenguajes de programación el usar hilos podemos ejecutar varios procesos simultaneos sin detener nuestro programa.

Por ejemplo: Tengo una aplicación en la que mis clientes manipulan y consultan datos continuamente y mi aplicación quiere hacer una descarga de un archivo pesado, si lo asemos sin asincronismo o sin usasr un “HILO” lo que pasará es que mientras ses descarga el archivo nuestro programa se congelara hasta que se termine de descargar el archivo. PERO si usamos funciones asincronas o HILOS lo que podremos hacer es que podremos decargar el archivo en segundo plano y nuestros clientes podran seguir usando el sistema sin problemas

Este es un tema complejo que si es la primera vez que lo estudias probablemente este muy complicado entenderlo. Peeeero no te rindas! Lo que hice fue ver distintas clases que hablaban de asincronismo hasta que pude entender que era lo que sucedia

Funciones Asincronas: Dado que JavaScript es un lenguaje sincrono, surgieron las funciones asincronas, estas son usadas para poner las promesas en segundo plano, para esperar que estas sean ejecutadas. Dado que las promesas tardan un poco mas en ejecutarse.

Para el manejo de errores en async await se usa un try catch

async function getProcessedData(url) {
  let v;
  try {
    v = await downloadData(url);
  } catch(e) {
    v = await downloadFallbackData(url);
  }
  return processDataInWorker(v);
}
 

ey ey ey ey!!
mucha información!!
console.log(¡Error!);
¡¡BOOM!!

bro no entiendo que esta pasandoooo

Muy buena explicación, me gusta usar los console.log para ir debugeando y saber que pasa, muero de ancias de ver el curso de consumo de APIS ahí seguro usan ejemplos ya con consultas a BD 👋

Está re buena esta característica de ES8, en realidad fue la que más me gustó. cuando se creaba llamados al servidor por ajax, era un desastre, un spaguetti de código, no sé si lo recuerda, después se mejoró con las promesas, y ahora con esta actualización, va a quedar mucho más simple el código para https requests.

Holaa! les comparto mi práctica:

const countriesList = (countrie) => {
    const countries = { panama: "Ciudad de panamá", venezuela: "Caracas", argentina: "Buenos Aires", colombia: "Bogotá", españa: "madrid", italia: "roma", china:"Pekín", rusia:"moscú" };

    return new Promise( (res,rej) => {
        setTimeout(()=>{
            const listArray = Object.keys(countries);
           if(listArray.includes(countrie))  {
            const list = Object.entries(countries)
            for (const iterator of list) {
                if(iterator[0]==countrie)
                res(`la capital de ${countrie} es ${iterator[1]}`);
            }
           }else
                rej((`la capital de ${countrie} no se encuentra en esta lista`));
        },3000)
    })
}

const getCapitalCountries = async () => {
    console.log("cargando...")
    await countriesList("argentina")
        .then( res => console.log(res))
        
}

getCapitalCountries()
    .catch(rej => console.log(rej));

Hay formas de hacerlo más optimo xdd, pero quería incluirle muchas cosas jejox

¿Cómo lo harías tu?

Async y Await cumplen la misma función que los métodos .then y .catch, la diferencia es que son mas legibles porque son similares al código secuencial. Aquí hay un video que resume ambos métodos.

https://www.youtube.com/watch?v=6O8ax3JYboc&list=LL&index=16&t=556s

Les comparto un codigo mas comprensible:

const fnAsync = () => {
    return new Promise ((resolve, reject) =>{
        (true)
            ? setTimeout(() => resolve ('Luego de esperar 2 segundos'),2000)
            :reject(new Error('Error!'));
    });
}

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

console.log('Antes');
anotherFn();
console.log('Despues');

Anotaciones ES8:

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

🦄✨ ¿Por qué las Funciones Asíncronas son Necesarias?

En JavaScript, las tareas que llevan tiempo, como las solicitudes a servidores, consultas, requerimientos, etc, pueden bloquear la ejecución de un programa, lo que significa que el código no seguirá ejecutándose hasta que la tarea se complete. Esto puede hacer que una aplicación parezca “congelada” y no responda a las interacciones del usuario.
Las funciones asíncronas se utilizan para evitar este problema al permitir que el programa continúe ejecutándose mientras se espera que se complete una tarea. Puedes mirarlo como una “Ejecución en segundo plano” o “Ejecución paralela” en otras palabras.

Entre promesas y async/await, pienso que cada una tiene su aplicación, ninguna es mejor o peor que la otra, hay que saber cuando usar cual.

Nunca había entendido lo de asincronismo, ahora ya aprendí al menos la sintaxis de promesas y async-await…a darle por más.

Mi resumen:

Se podría aclarar que la estructura de una función asincrónica es así:

async function anotherFn() {

}

El profe Oscar utiliza una arrow function:

const anotherFn =  async () => {

}

Feliz código 😃

Las promesas fueron una gran mejora respecto a las callbacks para controlar la asincronía en JavaScript, sin embargo pueden llegar a ser muy verbosas a medida que se requieran más y más métodos .then().

Las funciones asíncronas (async / await) surgen para simplificar el manejo de las promesas.

La palabra async declara una función como asíncrona e indica que una promesa será automáticamente devuelta.

Podemos declarar como async funciones con nombre, anónimas o funciones flecha.

La palabra await debe ser usado siempre dentro de una función declarada como async y esperará de forma asíncrona y no bloqueante a que una promesa se resuelva o rechace.

function cuadradoPromise(value) {
  if (typeof value !== "number") {
    return Promise.reject(
      `Error, el valor " ${value} " ingresado no es un número`);
  }

  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        value,
        result: value * value,
      });
    }, 0 | (Math.random() * 1000));
  });
}

async function funcionAsincronaDeclarada() {
  try {
    console.log("Inicio Async Function");

    let obj = await cuadradoPromise(0);
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    obj = await cuadradoPromise(1);
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    obj = await cuadradoPromise(2);
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    obj = await cuadradoPromise("3");
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    obj = await cuadradoPromise(4);
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    obj = await cuadradoPromise(5);
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    console.log("Fin Async Function");
  } catch (err) {
    console.error(err);
  }
}

funcionAsincronaDeclarada();

const funcionAsincronaExpresada = async () => {
  try {
    console.log("Inicio Async Function");

    let obj = await cuadradoPromise(6);
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    obj = await cuadradoPromise(7);
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    obj = await cuadradoPromise(8);
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    obj = await cuadradoPromise("9");
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    obj = await cuadradoPromise(10);
    console.log(`Async Function: ${obj.value}, ${obj.result}`);

    console.log("Fin Async Function");
  } catch (err) {
    console.error(err);
  }
};

funcionAsincronaExpresada();

Bastante interesante esta característica uwu

Ejercicio explicado con comentarios:

  // Empezamos defiiendo nuestra funcion promesa
  const funcionPromesa = ()=> { 
    //le digo que me devuelva lo que ejecute la promesa, ya sea si la resuelve o no
    return new Promise((resolve, reject) => {
      //operador ternario junto con un setTimeout para que me de un delay de 2s. Adicionalmente creo un objeto de error, el cual me ayuda a darle un manejo mejor a los errores porque tiene metodos y utilidades
      (true)
      //tengo que colocar el result como una arrow function para que me tome el setTimeout
      ? setTimeout(()=>resolve('Se resolvio la promesa!'),2000)
      : reject(new Error("Se produjo un error"));
    });
  };

      //aqui defino mi funcion asyncrona
      const ejecutarPromesa = async () => {
        //con el await le digo quie me espere hasta que se se ejecute
        const resolucion = await funcionPromesa();
        console.log('Activo la ejecucion del async, que demorara 2s');
        console.log(resolucion);
        console.log('finalizo la ejecucion del async');
        //el async respeta la ejecucion de lo que este adentro ojo, osea respeta la posicion para ejecutar , este se ejecuta despues
      }
      //Aqui lo que hacemos es validar que efectivamente la funcion asincrona no bloquee la ejecution del codigo
      console.log('Antes de ejecutar el async');
      ejecutarPromesa();
      //recuerda siempre que el setTimeout ejecuta son funciones no codigo, si le pones un console.log da error
      (true) ? setTimeout(()=>console.log('Luego de 2.1s se ejecuto todo el codigo'), 2000) : "No se ejecuto";

ES8: funciones asíncronas

Las funciones asíncronas no fueron específicamente introducidas en ECMAScript 8 (ES8), sino que forman parte de una evolución continua en las capacidades de JavaScript para trabajar con operaciones asíncronas de manera más cómoda y legible. Sin embargo, las funciones asíncronas, junto con la sintaxis async/await, se volvieron mucho más prominentes a partir de ECMAScript 2017 (ES8) y las posteriores versiones de ECMAScript.

Las funciones asíncronas y async/await son una forma más amigable de trabajar con código asíncrono en JavaScript. Aquí tienes una descripción general de cómo funcionan:

1. Funciones Asíncronas:
   Una función asíncrona es una función que permite la utilización de la palabra clave await dentro de su cuerpo. La declaración de una función asíncrona se realiza utilizando la palabra clave async antes de la palabra clave function.

async function miFuncionAsincrona() {
  // Código aquí
}

1. await:
   La palabra clave await solo se puede utilizar dentro de funciones declaradas como asíncronas. Cuando se utiliza await antes de una expresión que devuelve una Promesa, la ejecución de la función asíncrona se detendrá temporalmente hasta que esa Promesa se resuelva o rechace. Esto evita tener que encadenar múltiples then() y hace que el código sea más legible y similar a un estilo síncrono.

async function ejemplo() {
  const resultado = await algunaFuncionAsincrona();
  console.log(resultado);
}

ejemplo();

Esto hace que trabajar con código asíncrono, como operaciones de red o lecturas/escrituras en archivos, sea más intuitivo y estructurado, ya que puedes escribir código en un estilo más lineal y ordenado.

Es importante tener en cuenta que las funciones asíncronas y async/await no son características exclusivas de ES8, sino que son parte de las mejoras en la gestión de asincronía que se han ido introduciendo en versiones posteriores de ECMAScript. Por lo tanto, aunque las funciones asíncronas se volvieron más prominentes a partir de ES8, su desarrollo y evolución continúan en versiones posteriores del estándar de JavaScript.

Más ejemplos de funciones asíncronas

Aquí tienes algunos ejemplos adicionales de cómo puedes usar funciones asíncronas y async/await para manejar operaciones asíncronas de manera más clara y ordenada:

1. Ejemplo de lectura de archivo usando fs.promises (Node.js):

const fs = require('fs').promises;

async function leerArchivo(ruta) {
  try {
    const contenido = await fs.readFile(ruta, 'utf-8');
    console.log(contenido);
  } catch (error) {
    console.error('Error al leer el archivo:', error);
  }
}

leerArchivo('archivo.txt');

1. Ejemplo de múltiples llamadas asíncronas en paralelo:

async function obtenerDatos() {
  const [datos1, datos2, datos3] = await Promise.all([
    obtenerDatosAsincronos1(),
    obtenerDatosAsincronos2(),
    obtenerDatosAsincronos3()
  ]);

  console.log('Datos 1:', datos1);
  console.log('Datos 2:', datos2);
  console.log('Datos 3:', datos3);
}

obtenerDatos();

1. Ejemplo de manejo de errores con try/catch:

async function operacionAsincrona() {
  try {
    const resultado = await funcionQuePuedeFallar();
    console.log('Resultado:', resultado);
  } catch (error) {
    console.error('Hubo un error:', error);
  }
}

1. Ejemplo de cadenas de llamadas asíncronas usando await:

async function obtenerDatosCompletos() {
  const datos1 = await obtenerDatos1();
  const datos2 = await obtenerDatos2(datos1);
  const datos3 = await obtenerDatos3(datos2);

  console.log('Datos 1:', datos1);
  console.log('Datos 2:', datos2);
  console.log('Datos 3:', datos3);
}

obtenerDatosCompletos();

1. Ejemplo de uso de funciones asíncronas con for...of:

async function procesarElementos(elementos) {
  for (const elemento of elementos) {
    const resultado = await procesarElemento(elemento);
    console.log('Resultado:', resultado);
  }
}

Estos ejemplos ilustran cómo las funciones asíncronas y async/await pueden mejorar la legibilidad y la estructura de tu código al tratar con operaciones asíncronas. Sin embargo, es importante recordar que las operaciones asíncronas pueden llevar tiempo en ejecutarse, por lo que es crucial asegurarse de manejar correctamente los errores y considerar el rendimiento en situaciones donde las operaciones pueden acumularse.

Espero sea de utilidad. 👨‍💻

Ejemplo 2

const fnSemaforoVerde = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve('Semaforo en verde'), 8000)
            : reject(new Error('error'));
    });
}

const validarSemaforo1 = async () => {
    const validarSemaforoVerde = await fnSemaforoVerde();
    console.log(validarSemaforoVerde);
    console.log('Puede pasar');
}



const fnSemaforoAmarillo = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve('Semaforo en amarillo'), 4000)
            : reject(new Error('error'));
    });
}

const validarSemaforo2 = async () => {
    const validarSemaforoAmarillo = await fnSemaforoAmarillo();
    console.log(validarSemaforoAmarillo);
    console.log('Esta a punto de cambiar el color');
}



const fnSemaforoRojo = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve('Semaforo en rojo'), 1000)
            : reject(new Error('error'));
    });
}

const validarSemaforo3 = async () => {
    const validarSemaforoRojo = await fnSemaforoRojo();
    console.log(validarSemaforoRojo);
    console.log('Por favor pare');
}

validarSemaforo1();
validarSemaforo2();
validarSemaforo3();

bueno asi, fue.

const fnAsync = () => (
  new Promise((resolve, reject) => {
      (true) 
      ? setTimeout(() => {resolve('Async')}, 3000)
      : reject(new Error('error :v'));
  })
)

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


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

si le coloco el await en el anotherFn() el orden de los console.log() seria el siguiente

• before
• async
• hello
• after

Despues de practicar, leer y enteder como funciona el asincronismo lo entendi de esta manera espero les pues ayudar.

Hola, luego de repasar esta clase que antes pensaba imposible de entender, ahora vengo a elevar mi ego con el siguiente codigo :

(async () => {
function prueba1() {
  return new Promise((resolve, reject) => {
    (true) 
    ? setTimeout(() =>  resolve('secondary'), 3000)
    : reject(new Error('error!'))
  })
}

const execFunction = async () => {
  const data = await prueba1();
  console.log(data);
  console.log('three');
}

console.log('primary');

  await execFunction(); 
  console.log('four')
})();

Thanks. Bye !

GNDX… confundiendo mas porque no solodecir arrow function o funcion anonima jajajaa es lo mismo

Escribe un ejercicio donde debas realizar
varias solicitudes a una API utilizando funciones async y
await. Por ejemplo, puedes obtener datos de diferentes rutas
de una API y combinar los resultados en un solo objeto.

async function multipleApis(){
    
    const url =['https://jsonplaceholder.typicode.com/posts','https://jsonplaceholder.typicode.com/albums']
    
       const response = await Promise.all(url.map(link=>fetch(link)));
       if(response.every(resp => resp.ok)){
         const datos = [];
         datos.push(await Promise.all(response.map(date=>date.json())));
         console.log(datos)
        }
        else{
            throw new Error ('404 not found')
        }
    }
  


//multipleApis()

const anotherFunction3 = async () => {
    try {
      const something3 = await multipleApis();
      console.log('Hello');
    } catch (error) {
      console.log(error);
    }
  }
  

anotherFunction3();

Creo que esta parte es la que me frustra de llegar a ser un programador en JS. Igual que con promises… Lo dejo unos días y cuando retomo, igual… Quizás no sirvo para esto.

📃 Archivos del Proyecto 📃

Pasos 📌

• • Dentro de la carpeta es8, crear el archivo llamado: 05-async-functions.js
  • • ◦ El código queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
const fnAsync = () => {
	return new Promise((resolve, reject) => {
		(true)
			? setTimeout(() => resolve('Async!!'), 2000) //lo ejecuta 2 segundos después
			: reject(new Error('Error!'));
	});
}

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

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

/*output:
Before
After
Async!!
Hello!
*/

//Si se quitan las palabras reservadas de async y await:
/*output:
Before
Promise { <pending> }
Hello!
After
*/

Ejemplo del clima para obtener datos metereológicos

Imagina que estás desarrollando una aplicación de clima que necesita obtener datos meteorológicos de una API externa. Esta API tiene una función llamada getWeatherData() que devuelve una promesa con los datos del clima.

Aquí está el ejemplo de cómo podrías implementar esta funcionalidad utilizando funciones asíncronas:

async function fetchWeather() {
  try {
    const weatherData = await getWeatherData(); // Llamada asíncrona a la API para obtener los datos del clima
    displayWeather(weatherData); // Mostrar los datos del clima en la interfaz de la aplicación
  } catch (error) {
    console.log('Error al obtener los datos del clima:', error);
    // Manejar el error de manera apropiada (por ejemplo, mostrar un mensaje de error en la interfaz)
  }
}

function getWeatherData() {
  return new Promise((resolve, reject) => {
    // Simulación de una llamada asíncrona a la API del clima
    setTimeout(() => {
      const weatherData = { temperature: 25, description: 'Soleado' };
      resolve(weatherData); // Resolvemos la promesa con los datos del clima
      // En un escenario real, aquí se haría la llamada a la API y se resolvería o rechazaría la promesa en función de la respuesta recibida
    }, 2000); // Simulamos una demora de 2 segundos para obtener los datos del clima
  });
}

function displayWeather(weatherData) {
  console.log('Datos del clima:', weatherData);
  // Lógica para mostrar los datos del clima en la interfaz de la aplicación
}

fetchWeather();

En este ejemplo, la función fetchWeather() es una función asíncrona que utiliza await para esperar a que la función getWeatherData() resuelva la promesa y devuelva los datos del clima. Luego, se llama a la función displayWeather() para mostrar los datos en la interfaz de la aplicación.

La función getWeatherData() simula una llamada asíncrona a la API del clima utilizando setTimeout(). En un caso real, aquí se haría la llamada a la API y se resolvería o rechazaría la promesa en función de la respuesta recibida.

Al ejecutar el código, la función fetchWeather() se llama y realiza la llamada asincrónica a getWeatherData(). Utilizando await, espera a que la promesa se resuelva y luego pasa los datos del clima a displayWeather() para su visualización.

Si la promesa se resuelve exitosamente, los datos del clima se muestran en la consola. Si la promesa es rechazada (por ejemplo, debido a un error de red), se captura el error en el bloque catch y se muestra un mensaje de error.

Este ejemplo ilustra cómo las funciones asíncronas permiten realizar operaciones asincrónicas de manera más clara y concisa, evitando el anidamiento excesivo de callbacks y facilitando el manejo de errores.

Comparto mis apuntes de la clase:

Ni modo toca aprender asincronismo xd

const functionAsync = () => { //1

    return new Promise((resolve, reject) => { //2 //3
        (true) //4
        ? setTimeout (() => resolve("Async"), 2000) //5 //6
        : reject(new Error ("Error!")); //7       
    });
}


const otraFuncion = async () => { //8
    const something = await functionAsync();
    console.log(something);
    console.log("Hello");
}

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

Aquí tengo mi aporte según lo que yo entendí, vale destacar que aun no tengo mucho conocimientos con respecto a algunos temas, especificamente con el asincronismo xd, sin embargo, espero que esto le sirva de ayuda a alguien de la comunidad.
.
Primero veamos analicemos la imagen

Primero declaramos una función anonima de tipo arrow Function con el nombre de “fnAsync” y le pedimos en su lógica que nos devuelva un “new Promise((resolve, reject)” que es asi como hacemos para declarar una promesa

Resolve: significa, esto es lo que se ejecutará si la promesa es resuelta

Reject: significa, cuando la promesa es rechazada.

Toda la estructura de la promesa también es una arrow Function y por dentro declaramos una condicional ternaria (una condicional ternaria, basicamente es un atajo para declarar un if que mantiene la siguiente estructura “condición ? Expr1 : expr 2” siendo expr1 lo que se ejecutará si la condicional es verdadera y la expr 2 es lo que se ejecutará si la expr 1 no se cumple, es decir, que la expr 2 es nuestro “else”), para agregar nuestra lógica, la cual es:
.

• Si es verdadero (true)
  Entonces (?) se escribe lo que se hará en el caso de que se cumpla la condición, y lo que implementamos dentro de ella es un setTimeOut, que contendrá un arrowFunction en dónde nuestro “resolve” tendrá como argumento en sus parametros el mensaje de “Async!!”, por defecto, y luego destacamos el tiempo en que tardará en dispararse el mensaje, que es de 2000 milisegundos (2 segundos)
  .

• Despues, declaramos el else ( : ) que es lo que venga despues de los dos puntos en nuestra condicional ternario, lo que escribimos ahí es lo que pasará si nuestra promesa es rechazada, dandole los argumentos a nuestro “reject”, el cual será armar un constructor “Error”, se vería de la siguiente forma “Reject(new Error(“Error!”))” el primer parentesis es para determinar la acción de nuestro reject, y el segundo parentesis, el mas interno, es para determinar el contenido de nuestro new Error.
  Todo esto nos quedaría de la siguiente forma…
  .
  

  

.
Luego tenemos el siguiente paso:

.

• En este paso declaramos una const llamada “anoteherFn” que contendrá el “async()”, porque con el async() podemos concatenar otra función con la promesa, creando una lógica en otro plano, en otro hilo, y el async vendría siendo como nuestro output del promise, ¿y cómo js sabe que esta lógica esta concatenada con mi otra función “fnAsync”? ya lo veremos a continuación.
  .

• Despues de declarar el async(), dentro de su lógica arrowFunction, creamos una const que se llama “something” que almacenará la función a la cual le queremos hacer el await. Dicha función es la que contiene la promesa a la cual queremos concatenar nuestro async, en este caso la función sería, “fnAsync()”, líneas de código abajo hacemos un console.log de la const que contiene el await que es “someting” y hacemos otro console.log que diga “hello”.
  .

• Luego, cerramos nuestro anotherFn y fuera de la función, una línea de código mas abajo hacemos un console.log que diga “before” una línea de código abajo llamamos a nuestra función “anotherFn()” y otra línea mas abajo hacemos otro console.log que diga (After), esto lo hacemos para entender como va el flujo de trabajo, pero enrealidad, en las últimas líneas no importa el orden de los console.log, ya que de todas formas, la función anotherFn() es asincrónica, nunca va a interrumpir el flujo de trabajo de los otros console.log que solamente imprime un mensaje en el 1er plano, cuando la función anotherFn se esta ejecutando en 2do plano gracias al asincronismo.
  .
  

  
  Fijese en esta imagen que cambiamos el orden, y eso igual no importó, los útimos dos mensajes estan juntos igual que el primer ejemplo

.
**Bonus: **
.
Con esta prueba que hice jugando con el código, aprendí muchisimo más como funciona un resolve y un reject, cosa que me costaba mucho
.
Para que nos quede mas claro lo que significa el resolve y reject (según lo que yo entendí) .
Fíjate que en este apartado hicimos algo diferente, cambiamos de posición el resolve con el reject, pero con al condicional de true igual, de manera que podamos apreciar cual será la respuesta.
.
Aquí podemos ver que cuando nuestra condicional es true se dispara es el reject (recordemos que reject significa cuando se rechaza la promesa, como lo mencionamos mas arriba), la diferencia, es que tendrá como mensaje “AsynC!!” que era el mismo mensaje que tenía antes cuando era un resolve.
.
Fíjate cuando ejecutamos el código, lo que nos devuelve es un error con el mensaje que pedimos que nos devolviera porque es un reject.

Vale destacar que resolve no se ejecuta, ya que la condicional es true, por ende, no se ejecuta el “else”, pero entonces, ¿Qué pasaría si fuera falsa? Se activaría nuestro resolve, cierto? Veamoslo en la siguiente imagen
.

.
Fíjate que ahora si se acepta la promesa, ya que al ser falsa la condicional, la lógica recurre al resolve, y para promise eso significa que la promesa fue validada, por ende, se obtiene un resultado exitoso.
.
Espero les haya servido de ayuda este aporte, y por supuesto estan super Bienvenido los feedbacks, creo que cometí errores con algunos conceptos, se debe a que este tema es muy nuevo para mi. también vale destacar que es mi primera vez haciendo un aporte de esta magnitud. 😃

👎🏼

21/35 ES8: funciones asíncronas

El ECMAScript 2018 o ES8 introdujo las funciones asíncronas para manejar el asincronismo en JavaScript de manera más sencilla. Estas funciones se crean utilizando la palabra clave “async” y retornan una promesa. La palabra clave “await” se utiliza dentro de las funciones asíncronas para esperar a que una promesa se resuelva. Los bloques “try / catch” se usan para manejar si la promesa ha sido resuelta o rechazada.

Ejemplo:

async function obtenerDatos() {
try {
	const respuesta = await fetch('https://jsonplaceholder
	.typicode.com/todos/1');
	const datos = await respuesta.json();
	return datos;
 }catch (error) {
		console.log(error);
 }
}
obtenerDatos().then(datos=> console.log(datos));

En este ejemplo, la función obtenerDatos utiliza la palabra clave “async” y retorna una promesa. Dentro de la función, utilizamos la palabra clave “await” para esperar a que la respuesta de la API sea resuelta. Luego, convertimos la respuesta en un objeto JSON y lo retornamos. Utilizamos un bloque “try / catch” para manejar errores en caso de que la promesa sea rechazada. Por último, llamamos a la función obtenerDatos y utilizamos el método .then para manejar la promesa resuelta y obtener los datos retornados.

const fnAsync1 = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve('ejecutando async 1'), 4000)
            : reject(new Error('Error'));
    });
}

const fnResuelta1 = async () => {
    const something = await fnAsync1();
    console.log(something);
    console.log('success 1')
}
fnResuelta1();

const fnAsync2 = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve('ejecutando async 2'), 3000)
            : reject(new Error('error'));
    });
}


const fnResuelta2 = async () => {
    const something2 = await fnAsync2();
    console.log(something2);
    console.log('success 2');
}
fnResuelta2();

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

const fnResuelta3 = async () => {
    const something3 = await fnAsync3();
    console.log(something3);
    console.log('success 3');
}

fnResuelta3();

const fnAsync4 = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve('ejecutando async 4'), 1000)
            : reject(new Error('error'));
    });
}

const fnResuelta4 = async () => {
    const something4 = await fnAsync4();
    console.log(something4);
    console.log('success 4');
}

fnResuelta4();

// Output
ejecutando async 4
success 4
ejecutando async 3
success 3
ejecutando async 2
success 2
ejecutando async 1
success 1

talvez te confunda la sintaxis aca la documentación te lo aseguro que entenderás mejor todo

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

Ejecuten este código en su navegador:

const getPikachu = async() => {
    const response = await fetch('https://pokeapi.co/api/v2/pokemon/25')
    const data = await response.json()
    console.log(data)
}

getPikachu()

async
await

Yo estoy intentando hacer que mi codigo se explique solo, como haciendo los nombres bien diferentes para saber que no es una palabra reservada, y cada console.log explique que ha pasado en el proceso, así pude entender mejor el proceso que hizo la consola al ejecutar las funciones asíncronas.

Aquí mi código:

const fnConTiempo = () => {
    return new Promise((resolveichon, rejecteichon) => {
        (true)
            ? setTimeout(() => resolveichon('Ya pasaron 3 segundos'), 3000)
            : rejecteichon(new Error('Upale, hay un error!'));
    });
}

const fnConAsync = async() => {
    const consConFnAdentro = await fnConTiempo(); //Esto ejecuta los 3000, dice que espere que se ejecute la fnConTiempo  
    console.log(consConFnAdentro);
    console.log('Se acabó de imprimir consConFnAdentro que tiene adentro await fnConTiempo lo que hace esperar 3 segundos para imprimir "ya pasaron 3 segundos".');
}

console.log('Inicio del programa, antes de ejecutar fnConAsync');
fnConAsync();
console.log('Ya se anda ejecutando fnConAsync');

Hice un epqueño ejercicio siguiendo la sintáxis vista, es una promesa que de ser resuelta (true)mostrará una matriz con objetos que contienen datos como nombre, edad y dirección email, de no ser resuela (false) genera una mensaje de ‘No se pueden mostrar datos’.

En la parte de la función async await se declara dentro de una variable llamada ‘showNames’, hice uso del try/catch el cual de acuerdo a la documentación es un bloque de código con instrucciones a realizar, dentro del try estará la parte del await que está declarada en otra variable llamada ‘awaitShowed’, de modo que aquí se relizará el procesamiento de la información para posteriormente mostrarla en consola.

const namesInfo = () => {

    return new Promise((resolve, reject) => {
        (true)
        ? setTimeout(() => resolve([{

            Name: 'Ernesto',
            Age: 25,
            email: '[email protected]'
        }, {

            Name: 'Jorge',
            Age: 45,
            email: '[email protected]'
        },  {


            Name: 'Jessica',
            Age: 34,
            email: '[email protected]'
        }]), 6000)

        : reject(new Error('No se pueden mostrar datos'))
    })
}

const showNames = async() => {

    try {

        const awaitShowed = await namesInfo();
        console.log(awaitShowed);
        console.log('Datos descargados');


    } catch (error) {

     console.log(error);
    }
}


console.log('Procesando Datos')
showNames()

A mi no me está mostrando el mensaje “Async” que tiene en resolve en consola. Solo me lo muestra si le pongo un console.log dentro del resolve. Alguien sabe por qué me pasa eso? El setTimeout está funcionando correctamente.

Apunte en Notion

LINK: https://pogolo.notion.site/21-ES8-Funciones-As-ncronas-3b27e1c6a6134af8b99ff399f9c37fc8

En resumidas cuentas, las funciones asíncronas están ahi para esperar a que otra función o promesa se ejecute, es decir, que una función asíncrona se ejecuta cuando la promesa o la función devuelve alguna respueta. Y esto lo hace sin interrumpir el flujo de trabajo de las funciones que le preceden. Corriganme si estoy mal 😄

Aquí les dejo el código de la clase:

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