Funciones asíncronas

🎢 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟯: 𝗙𝘂𝗻𝗰𝗶𝗼𝗻𝗲𝘀 𝗮𝘀í𝗻𝗰𝗿𝗼𝗻𝗮𝘀 𝟭𝟯/𝟮𝟭 🎢
.
🔁 ¿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: “Es mayor”, de lo contrario tomará el valor: “Es 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ó

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.

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.

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.

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

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

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 “hello” 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 ')

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 “engorrosa” 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 😉

Recordar también… ¿Como utilizar Async en diferentes estructuras?

async function funcionObjeto(parameter){}

Otra forma:

const otherFunction = async(parameter) => {}

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 “¡Async!” 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 “¡Hello!” en la consola.

3. Fuera de las funciones, tienes tres líneas de código que imprimen “Before”, “After” y llaman a anotherFn. Notarás que “Before” se imprimirá antes de que anotherFn se ejecute, y “After” 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 “Before” y “After” se imprimen de inmediato, mientras que “Async!!” se imprime después de que la promesa en fnAsync se resuelve (2 segundos después) y “Hello!” se imprime después de eso, ya que es parte de la función anotherFn que se llama después.

Espero sea de utilidad. 👨‍💻

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

para entender mejor las Promesas

Promises - Hola Mundo

🍃 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 “Async!!” 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 “Hello!”.

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

3. Se muestra en la consola el mensaje “Before”.

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

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

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
}

🔥 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:‘carlos iglesias’,
profesion:‘Ingeniero’,
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(‘lo sentimos no apñlicas al proceso’));
}
})
}

const resultado = async ()=>{
const validar = await candidato();
console.log(‘proceso inical’);
console.log(validar);
console.log(‘proceso finalizado’);
}
resultado();

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

const persona={
nombre:‘carlos iglesias’,
profesion:‘Ingeniero’,
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(‘lo sentimos no apñlicas al proceso’));
}
})
}

const resultado = async ()=>{
const validar = await candidato();
console.log(validar);
console.log(‘proceso 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?

Mis apuntes en Notion💚

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 “Hola!” en la consola. Finalmente, se imprime “antes” y “despué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.

Recurso para repasar las diferencias entre Async y Promise

https://www.youtube.com/watch?v=6O8ax3JYboc&list=PLUdlARNXMVkm5NAUw3VQG5RcZIhquVXD2&index=2

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 “runExample”, se imprime “Ejecutando función…” y luego, después de 2 segundos, se imprime “Listo después de 2 segundos”.

Esto es jodidamente util

´´´javascript
const fnAsync = () => {
return new Promise((resolve, reject) => {
(true)
? setTimeout(() => resolve(‘Async!!’), 2000)
: reject(new Error(‘Erro!’));
})
}

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

console.log(‘Before’);
anotherFn();
console.log(‘After’);
/*
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!

Asíncronismo en JS - Notion

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 ‘azucar sintactico’ ya que lo ‘unico’ 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 “Asíncrona” la cual devuelve un “Objeto”.

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