Funciones asíncronas

Clase 15 de 26 • Curso de Asincronismo con JavaScript

Maria Gabriela Rodriguez Cuevas

student•

🎢 𝗖𝗹𝗮𝘀𝗲 #𝟭𝟯: 𝗙𝘂𝗻𝗰𝗶𝗼𝗻𝗲𝘀 𝗮𝘀í𝗻𝗰𝗿𝗼𝗻𝗮𝘀 𝟭𝟯/𝟮𝟭 🎢 . 🔁 ++¿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: .

La palabra async antes de la función, hace que la función devuelva una promesa.
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;

La primera es la lógica, se evalúa una condición.
La segunda parte está después del signo de cierre de interrogación ?, ésta se ejecuta solo si la condición es verdadera true.
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!
*/

David Horacio Duarte Angulo

student•

Gracias por tus apuntes, son geniales! Un pequeño error en el setTimeout, el paréntesis de cierre está mal ubicado

setTimeout(() => resolve('Async!!'), 2000)

Mateo Arias Correa

student•

No sabes todo lo que me has ayudado a este curso

German Cavani

student•

Cristobal Nyram

student•

Resumen de la imagen: como hacer código asíncrono en JS

-callbacks -promises -Asyns

Antonio Rafael González Ferrer

student•

Pyramid of Doom! suena hardcore 😆

Fabian Bejarano González

student•

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ó

Deniss Bonilla Paredes

student•

Muy bueno tu ejemplo para entender qué es lo que realmente está sucediendo

Lisbeth Quintero

student•

Muchas gracias

Edgar López Laynez

student•

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

Jessica García

student•

Pensé que era la única que pensaba así :c

Andrea Carolina Mora López

student•

Quiero compartir mi exploración

Juan Ramirez

student•

📍 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.

Max Andy Diaz Neyra

student•

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.

Porfirio González López

student•

Gracias por la aclaración!

Diego Boyatjian

student•

me sirvio mucho tu aporte! gracias!!

Carlos Andres Alavez Santiago

student•

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.

Tomas Langer Duran

student•

te entiendo siento que no entendi absolutamente nada de esta clase

Felipe Duarte De la Espriella

student•

100% de acuerdo, el profesor y yo no entendemos la cosas de la misma manera. Y la respuesta de muchos es "busca material en otro lado", pero entonces yo pienso: entonces para qué estoy pagando?

Laura Daniela Aponte Beltrán

student•

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

Luis Hernando Sendoya Serrato

student•

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

Max Andy Diaz Neyra

student•

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.

Fernando Andrés García Muñoz

student•

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:

Utilizando directamente el objeto XMLHttpRequest, que es el encargado de realizar las peticiones asincrónicas.
Utilizando del objeto Promise, que es una manera más simple de realizar las peticiones asíncronas.
Implementando Fetch. Es una manera más cómoda de realizar las peticiones con promesas.
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 😉

Jherom Chacon

student•

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

Stephany Plaza

student•

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

Waldir Leonardo Jesus Lopez Peve

student•

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

Joao Ivan Garduño Salgado

student•

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

async function funcionObjeto(parameter){}

Otra forma:

const otherFunction = async(parameter) => {}

Federico Ivan Llano

student•

me gusta mas el primer metodo, y ahora en la version es13 no es necesario escribir el async. await en ES13 YT

Duvan Alexis Palomino Ramirez

student•

Comunidad porque en el ejemplo de la clase si cambio la condicion a false me genera error en new Error y no genera la promesa?

Ramsés Castañeda

student•

¿Cuántos "Await" se pueden colocar dentro de una función asíncrona, solamente dos o los que necesite?

Kevin J. Zea Alvarado

student•

Hola, Ramsés. 👋 En mi experiencia, pueden ser tantos como se necesiten. Quizás haya un límite, pero muy probablemente es un número grande.

Sunjing Lama

student•

No hay limite.

Pero si algunas de estos procesos asincronos son independientes, es decir await # 2 no depende del resultado de await #1 entonces podrias revisar este ejemplo en la documentacion de MDN

la diferencia en el tiempo de ejecucion para add1 y add2 esta determinada por donde colocamos el await

Luis Alfredo Suarez

student•

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

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.
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.
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. 👨‍💻

Antonio Ramón Molina Simancas

student•

Con todo respeto, el profe me recuerda a Cantinflas, no puede colar tantas palabras incoherentes en la explicación! Confunde muchísimo!!!

Cristian Damaso Calderon Rojas

student•

Estamos peor, pero estamos mejor. Porque antes estábamos bien, pero era mentira. No como ahora que estamos mal, pero es verdad.