Creando algoritmos asíncronos

Hasta ahora, hemos utilizado código JavaScript para ejecutar aplicaciones web simples, que incluyen: usar variables, llamar a funciones y jugar con el DOM. En las funciones, específicamente, incluso pasamos funciones a otras funciones (funciones callback) y hay mucho más que hablar al respecto.

Comencemos diciendo que JavaScript por defecto es síncrono y con una sola secuencia, es decir: el código se ejecuta desde la línea 1 hasta el último, uno a la vez y en ese orden normalmente. Échale un vistazo a este ejemplo:

Síncrono (por defecto)

1function correPrimero(){
2    console.log("primero");
3}
4function correSegundo(){
5    console.log("segundo");
6}
7correSegundo();
8correPrimero();
9
10/*
11RESULTADO EN CONSOLA:
12  > segundo
13  > primero
14*/

Aquí: la línea 5 se ejecuta antes de la línea 2 porque estamos llamando a ejecutarSegundo () (línea 7) antes de ejecutarPrimero () (línea 8). Rompiendo el orden de mando de la computadora que llama (o ejecuta) el bloque de código dentro de una función.

Las cosas se complican más cuando se llaman funciones dentro de funciones, como podemos ver aquí:

Funciones dentro de funciones

1function correPrimero(){
2    console.log("Quiero correr primero");
3    correSegundo();
4    console.log("Yo también quiero correr cuando correPrimero corra");
5}
6function correSegundo(){
7    console.log("¿Dónde estoy corriendo?");
8}
9correPrimero();
10
11/*
12RESULTADO EN CONSOLA:
13  > Quiero correr primero
14  > ¿Dónde estoy corriendo?
15  > Yo también quiero correr cuando correPrimero corra <-- Esta línea de código tuvo que esperar a que correSegundo() terminara
16*/

OK ¿qué...?

Esto sucede porque la call stack en JavaScript lleva un registro de las funciones que se están ejecutando actualmente y se están procesando:

correPrimero() se añade al call stack porque la llamamos (línea 9).
Vemos nuestro primer console.log (línea 2), después de eso, se llama a correSegundo() (línea 3).
correPrimero() hace una pausa en su ejecución y correSegundo() comienza a ejecutarse.
Segundo console.log se ejecuta (línea 7).
Una vez que correSegundo() termina, correPrimero() comienza nuevamente, ejecutando el resto de su código, el último console.log (línea 4).

¡ D I V I E R T E T E !

Pero espera, hay más... Incluso podríamos pasar una función como argumento a otra función (no, esto no es un error tipográfico). La función enviada como parámetro se llama función callback. Echa un vistazo:

Funciones callback

1    function correPrimero(unaFuncion){
2        console.log("Quiero correr primero");
3        unaFuncion();
4        correSegundo();
5        console.log("También quiero correr cuando se ejecute correPrimero");
6    }
7    function correSegundo(){
8        console.log("¿Dónde estoy corriendo?");
9    }
10    correPrimero(unaTercera);
11
12    function unaTercera(){
13        console.log("Esto es una locura");
14    }
15
16
17/*
18RESULTADO EN CONSOLA:
19  > Quiero correr primero
20  > Esto es una locura
21  > ¿Dónde estoy corriendo?
22  > También quiero correr cuando se ejecute correPrimero
23*/

...Es posible que quieras repasar, no te preocupes, tenemos tiempo...

¡Tiempo de explicaciones!

Hemos agregado una nueva función unaTercera() (línea 12), que muestra los registros de la consola: "Esto es una locura"; pero no la estamos llamando directamente, en cambio, estamos pasando el nombre como parámetro a correPrimero() (línea 10). correPrimero(unaFunción) ahora espera un valor (línea 1) que llamaremos como si fuera una función (línea 3). Ten en cuenta que el nombre es diferente porque pasamos el valor, no el nombre de la variable. Esto produce una nueva impresión en la consola: "Esto es una locura", antes de llamar a correSegundo() (línea 4).

...jump around!, jump around!, jump around!, Jump up, jump up and get down! (music)...

Ahora, supongamos que necesitamos cargar algunos archivos desde un servidor, específicamente, imágenes:

Carga síncrona de imágenes

1function cargarImagen(){
2    console.log("¡Cárgala!");
3    // Código para cargar una imagen
4    console.log("¡Imagen cargada!");
5}
6function usuarioEsperando(){
7    console.log("No me gusta esperar");
8}
9cargarImagen();
10usuarioEsperando();
11
12/*RESULTADO EN CONSOLA
13  > ¡Cárgala!            // El usuario comienza a esperar
14                         // Ahora el usuario tiene que esperar a que lleguen las imágenes; hora: desconocida... navegador: congelado :(
15  > ¡Imagen cargada!     // Después de ?? segundos
16  > No me gusta esperar  // No queremos que los usuarios esperen tanto tiempo para ver las imágenes
17*/

Inaceptable...

En un sitio web de la vida real, los usuarios tendrán que esperar mucho tiempo para ver algo, todo porque el procesamiento DOM tiene que esperar a que lleguen las imágenes desde el servidor; y esto es todo porque estamos usando el mismo hilo de ejecución para todo.

Asíncrono

La programación asíncrona es una forma de procesar líneas de código y manejar el resultado sin afectar el hilo principal.

1function cargarImagen(){
2    console.log("¡Cárgala!");
3    fetch("la_url_de_la_imagen").then( (response) => {
4        if(response.ok){ 
5            console.log("¡Imagen cargada!");
6        } else {
7            console.log("Uh-oh algo salió mal");
8        }
9    });
10}
11function usuarioEsperando(){
12    console.log("No me gusta esperar");
13}
14cargarImagen();
15usuarioEsperando();
16
17
18/*RESULTADO EN CONSOLA:
19	> ¡Cárgala! 					// El usuario comienza a esperar
20	> No me gusta esperar 				// ¡Sin espera! DOM listo para ver
21							// ... y ?? segundos más tarde
22	> ¡Imagen cargada! || Uh-oh algo salió mal 	// ¡Imagenes!... Mágia! || Oops, no hay imágenes
23*/

JavaScript ofrece varias funciones asíncronas predefinidas que podemos utilizar para resolver cualquier escenario posible. Algunas de ellas son:

Fetch API: se utiliza para cargar archivos de forma asíncrona.
setTimeout(): se utiliza para establecer temporizadores entre bloques de código.

En este caso, utilizamos la Fetch API para cargar las imágenes, then (luego) (después de obtener una respuesta del backend) escribimos algunos comentarios sobre el proceso.

Ten en cuenta que cualquier petición (request) HTTP puede fallar por diversas razones, siempre debemos estar preparados para un fallo.

Promesas

Una promesa no es más que el resultado de una operación asíncrona. Representa la finalización o el fracaso de ese resultado en un objeto proporcionado por la promesa.

Una promesa (promise) tiene 3 estados diferentes:

Pendiente: el resultado de la promesa aún no se ha determinado porque la operación asíncrona no se ha completado.
Cumplida: es cuando la operación asíncrona finaliza y la promesa devuelve un valor como un objeto.
Rechazada: tiene lugar cuando la operación falló.

Así es como se puede crear una promesa:

1var myPromise = new Promise(function(resolve, reject) {
2  setTimeout(function() {
3    resolve("La promesa se ha resuelto");
4  }, 300);
5});
6myPromise.then((obj) => {
7  console.log(obj);
8});
9console.log(myPromise);
10
11/*RESULTADO EN CONSOLA:
12	> [Objeto de promesa] // Devolverá un objeto de promesa
13	> La promesa se ha resuelto
14*/

Funciones Resolve y Reject

Resolve se utiliza para cambiar el estado de una promesa de pendiente a cumplida.
Reject se utiliza para cambiar el estado de pendiente a rechazada.

Métodos importantes que debemos conocer al usar promesas

resolve: devuelve un objeto de promesa que tiene el estatus de resuelto con un valor.

1	// Aquí Promise representa el objeto de la promesa
2	Promise.resolve("La promesa se ha resuelto con este valor").then(value => console.log(value));
3	
4	/*RESULTADO EN CONSOLA:
5	> La promesa se ha resuelto con este valor
6	
7	***********
8		Un mejor enfoque sería inicializar una variable
9		igual a la promesa resuelta
10		
11	--- ejemplo: 
12		let myResolvedPromise =  Promise.resolve("La promesa se ha resuelto con este valor");
13	*/

reject: devuelve una promesa rechazada por un motivo.

1Promise.reject(new Error("Fui rechazada")).then(error => console.log(error));

then: este método devuelve una promesa y puede tomar hasta 2 argumentos. Una para la promesa resuelta y otra para la promesa rechazada. Arriba hay un ejemplo que usa el método then y toma un argumento.

1let promise = new Promise(function(resolve,reject){
2    resolve("Fui resuelta y puedes verme cuando usas el método resolve");
3});
4promise.then(value => console.log(value));

catch: devuelve una promesa y se ocupa de las operaciones rechazadas. Es muy útil cuando se trata de depurar o mostrar errores.

1let promise = new Promise(function(resolve,reject){
2    reject("Me rechazaron y puedes verme cuando usas el método catch");
3});
4promise.catch(error => console.log(error));

Async/await

Async/await es una forma de escribir código asíncrono.
Async es una función de JavaScript y puede contener una expresión await.
Await pausa la ejecución de la función asíncrona y espera el resultado de una promesa.

☝ Recuerda que las expresiones await solo son válidas dentro de funciones asíncronas. Si las usas fuera, tendrás un error de sintaxis.

1function returnedPromiseHere() {
2    return new Promise((resolve, reject) => {
3        setTimeout(() => {
4            resolve("Yo soy las imágenes que vienen de la base de datos");
5        }, 1000);
6    });
7}
8async function useAsyncFunction() {
9    console.log("Soy una tarea rápida");
10    let result = await returnedPromiseHere();
11    console.log(result);
12    console.log("Tuve que esperar a que el await terminara");
13}
14useAsyncFunction();
15
16/*RESULTADO EN CONSOLA:
17	> Soy una tarea rápida
18	// Después de 1 segundo...
19	> Yo soy las imágenes que vienen de la base de datos
20	> Tuve que esperar a que el await terminara
21*/

Async se vuelve poderoso cuando hay varios pasos en acción:

1function promise1() {
2    return new Promise((resolve, reject) => {
3        setTimeout(() => {
4            resolve("Estoy resuelta como 1");
5        }, 100);
6    });
7}
8function promise2() {
9    return new Promise((resolve, reject) => {
10        setTimeout(() => {
11            resolve("Estoy resuelta como 2");
12        }, 200);
13    });
14}
15function promise3() {
16    return new Promise((resolve, reject) => {
17        setTimeout(() => {
18            resolve("Estoy resuelta como 3");
19        }, 300);
20    });
21}
22async function handlingAllPromises() {
23    let first = await promise1();
24    let second = await promise2();
25    let third = await promise3();
26  
27    console.log(first);
28    console.log(second);
29    console.log(third);
30}
31handlingAllPromises();

☝ En el ejemplo anterior, en lugar de esperar (await) una promesa en cada nueva línea, podríamos usar el método Promise.all y esperar a que se cumplan todas las promesas.

1let [first, second, third] = await Promise.all([promise1(), promise2(), promise3()]);

También puedes hacer funciones asíncronas como funciones de flecha (arrow functions)

1const handlingAllPromises = async () => {
2    let [first, second, third] = await Promise.all([promise1(), promise2(), promise3()]);
3  
4    console.log(first);
5    console.log(second);
6    console.log(third);
7}

¿Cómo manejar errores en funciones asíncronas?

Una buena manera de manejar los errores en las funciones asíncronas es usar las sentencias try...catch.

1async function handeErrors() {
2    let msg;
3    try {
4        msg = await promise1(); // Nótese que este método ya está escrito en su aplicación
5        console.log(msg);
6    } catch(err) {
7        console.log(err);
8    }
9}

Fetch API se basa en una promesa. ¿Adivina qué? ¡Puedes usarlo en tus funciones asíncronas también!

1async function fetchData(endpoint) { 
2    const response = await  fetch(endpoint);  // Nota el uso de fetch API
3    let data = await res.json();
4    data = data.map(user => user.ID); 
5    console.log(data); 
6}
7
8fetchData(http://dummyData/api/allUsers); // Este es un ejemplo de endpoint
9
10/*RESULTADO EN CONSOLA:
11	> [1, 2, 3, 4] // Aquí obtenemos todos los ID de los usuarios de la base de datos
12*/

En conclusión

Tienes la capacidad de crear aplicaciones web increíbles y más rápidas. Además, los usuarios y las tareas más rápidas ya no tienen que esperar a que finalicen las tareas lentas, gracias a la programación asíncrona.

Weekly Coding Challenge

Podcast: Code Sets You Free