No es un secreto para nadie que no soy el fan #1 de Javascript, pero como un entusiasta de la tecnología me entretiene aprenderlo y aplicarlo en los proyectos que se presentan en mis labores. Pues bien, en junio liberaron al público la versión ES8 (ecmascript 8) de javascript. Si bien debo hacer un post más extenso que este para analizar los features que nos ofrece quería, como primicia, compartir un poco del feature que más me ha gustado, siendo este: Async/Await

Primero que nada vamos a ver como actualmente resolvemos el problema de la asincronicidad de tareas en javascript. Mayormente se utiliza el concepto de promesas. Como definición formal de una Promesa tenemos:

El objeto Promise (Promesa) es usado para computaciones asíncronas. Una promesa representa un valor que puede estar disponible ahora, en el futuro, o nunca.

MDN Webdocs

Bien ya en la práctica una promesa es una tarea que se ejecuta asíncronamente y según su resultado puede resolverse o rechazarse.  Como en el siguiente ejemplo:

var request = require('request');

function getRandomAnimal() {
  return new Promise((resolve, reject) => {
    request('https://animales.com/get/random', (err, res, body) => {
      if (err) {
        reject(err); return;
      }
      resolve(body);
    });
  });
}

En este código, se devuelve la promesa de que vamos a buscar un animal random en nuestro servicio web de animales. En caso de que ocurra algún error simplemente rechazamos la promesa y arrojamos el error, y en caso de que la promesa se resuelva simplemente devolvemos el animal encontrado, justo como lo prometimos!

Bien si quisiéramos usar esto, hariamos algo asi como esto:

getRandomAnimal().
   then((txt) => console.log(txt)).
   catch((err) => console.log(err));

Y así solucionamos de cierta forma el problema del callback hell. Al menos hasta que salió async/await.

Pero no estamos aquí para hablar de Promises, si no más bien para demostrar cómo es que trabajan los features de async/await en el nuevo y mejorado javascript.

Async/Await

Aun cuando teníamos Promises el código en javascript podía con facilidad perder legilibilidad en cuanto a la secuencia de acciones que se iban realizando, y terminar finalmente en un lugar parecido a los callback hells. Ahora la belleza de async await nos devuelve el control sobre nuestras secuencias.

tenemos que async es un modificador de una función que indica que dicha función tiene dentro de sus declaraciones operaciones que son asíncronas, y que por ello podemos usar a su hermano await.  

Para demostrarlo tomamos el ejemplo básico de la documentación y lo mostramos a continuación

function resolverDespuesDe2Segundos(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function sumar(x) {
  var a = resolverDespuesDe2Segundos(20);
  var b = resolverDespuesDe2Segundos(30);
  return x + await a + await b;
}

sumar(10).then(v => {
  console.log(v);  // muestra en consola 60 después de 2 segundos.
});

async function añadir2(x) {
  var a = await resolverDespuesDe2Segundos(20);
  var b = await resolverDespuesDe2Segundos(30);
  return x + a + b;
}

sumar(10).then(v => {
  console.log(v);  // muestra en consola 60 después de 4 segundos.
});

Observamos que siempre que la función devuelva una promesa y este dentro de un contexto asíncrono (async)  es posible esperar por ella siempre y cuando se use el modificador para espera (await).

Estas dos joyas de la programación moderna le devuelven el placer de programar a programar javascript porque es más claro lo que las funciones hacen en sus secuencias de control, en lugar de que todo parezca magia negra al leerlo! Definitivamente un gran paso hacia adelante para el desarrollo en javascript.

Asi que vayan y comiencen a usarlo cuanto antes!

 

Categorized in:

Tagged in:

, , ,