« Back
in javascript promise async read.

El futuro de la programación asíncrona en JavaScript.

Bueno, creo que algo ha quedado claro desde el post anterior, y es que tengo que escribir posts en español xD Muchas gracias a todos por el apoyo y la buena acogida del post anterior, espero que este lo supere 1 ;)

Sincronicidad

Cuando teníamos que programar código síncrono normal y corriente, no había ningún problema, los programas se ejecutaban línea a línea, al estilo puramente estructurado (si no tienes en cuenta los hoistings de javascript) y hasta aquí todo bien.

var invitaciones,  
      nuevoUsuario = crearUsuario(nombre),
      amigos = getAmigosTwitter(nombre);

  if (amigos) {
      invitaciones = invitarAmigosTwitter(amigos);
  }

Fácil, no? Antes todo era sencillo y maravilloso... hasta que llegaron los callbacks.

Callbacks

No se le puede reprochar mucho a los callbacks, la verdad, ya que fueron una de las cosas que hicieron que javascript definitivamente saltara a la fama, pero seguro que este código te resulta familiar...

crearUsuario(nombre, function() {  
    getAmigosTwitter(nombre, function(amigos) {
        if (amigos) {
            invitarAmigosTwitter(amigos, function(invitaciones) {
                // hasta el infinito... y más allá!
            });
        };
    });
});

Así es, el temido y odiado por igual callback hell o, como a algunos les gusta llamarlo, código en spaguetti. Se mire por donde se mire, aunque práctico, este código resulta ilegible, lioso, y un gran quebradero de cabeza con un par de callbacks más.

Promesas

Por suerte para nosotros, las promesas acudieron al rescate, y el anterior código podría refactorizarse como sigue:

crearUsuario(nombre)  
  .then(getAmigosTwitter)
  .then(function(amigos) {
    if (amigos) {
      return invitarAmigosTwitter(amigos);
    } else {
      throw new ErrorAntiSocial('Cómprate un amigo!');
    }
  })
  .catch(mostrarError);

Mucho mejor no? Las promesas pueden encadenarse y gestionarse individualmente o como colectivo algo indiscutiblemente mucho más útil y legible que el callback hell.

Por cierto, desde la introducción del ES6 (ES2015), crear una promesa es tan fácil como lo siguiente...

function getGists(){  
    return new Promise(resolve, reject) {
        $http.get('https://api.github.com/users/kutyel/gists')  
        .then(function(res) {
            resolve(res.data);
        })
        .catch(function(err) {
            reject('Gists error', err.status, err.data);
        });
    };
}

Ya no más librerías externas de promesas 2, ni polyfills etc...

Sin embargo, la programación con promesas no es todo lo bonita e intuitiva que debería ser, la cosa aún puede ser mejor...

Funciones asíncronas de ES7 (ES2016)

Con la propuesta del próximo estándar de JavaScript del año que viene, tus dos nuevas palabras favoritas serán async y awaits, y ahora verás porqué:

async function crearNuevoUsuario(nombre) {  
  var invitaciones,
      nuevoUsuario = await crearUsuario(nombre),
      amigos = await getAmigosTwitter(nombre);

  if (amigos) {
      invitaciones = await invitarAmigosTwitter(amigos);
  }
}

Te suena este trozo de código? Ahora sí, ¿verdad? Igualito que nuestro querido código síncrono de toda la vida, pero asíncrono, sin duda alguna una increíble propuesta para el nuevo estándar del año que viene! Qué ganas!!


Por cierto, por muy amante del Chrome que sea... hay una noticia que me ha pillado totalmente desprevenido: Microsoft Edge ya ha implementado esta funcionalidad en su próxima versión del navegador :O Pues sí que se están dando caña los de M$... sí. Así que ya sabéis si sois algo impacientes y tenéis ganas de poner esto en práctica, ya podéis hacerlo sin esperar los mil años que van a tardar en implementar esta funcionalidad, todavía sin aprobar, en el resto de navegadores.


Dicho esto, como siempre, cualquier duda o desacuerdo o cualquier cosa que simplemente te llegue salvajemente a la mente, exprésala en los comentarios o comparte este post en tus redes sociales ;)

comments powered by Disqus