Sintaxis async/await ¿Qué es? ¿Podemos usarla ya?

Letrero con la expresión async/await y un fragmento de código con dichas palabras resaltadas

La sintaxis JavaScript de flujo asíncrono async/await lleva ya cosa de un año funcionando en la práctica totalidad de los navegadores modernos. El infiernos de los callbacks pronto será cosa del pasado.

Eso sí, Internet Explorer no es, ni será nunca, compatible. Para IE, la única opción sería usar un transpilador, como Babel.

Sintaxis

Las funciones declaradas async se denominan funciones asíncronas. Su contenido puede ser como el de cualquier otra función. La diferencia es que siempre devuelven implícitamente una promesa, que será:

  • resuelta (resolved) con el valor que devuelva la función (return), o bien
  • rechazada (rejected) con la excepción, no capturada, que se lance durante la ejecución de la función.
Captura de DevTools mostrando la promesa que devuelve una función asíncrona en ambos casos
Las funciones asíncronas se encargan de crear y gestionar un objeto Promise de manera transparente.

Operador await

Existe una tercera opción, que sería dejar la promesa pendiente de resolución (pending). Para eso está el operador await.

Supongamos que tenemos una función descargarFicheros() que realiza alguna tarea asíncronamente y devuelve una promesa (podría estar implementada con la sintaxis async/await, pero no necesariamente). Podríamos usarla dentro de una función asíncrona de la siguiente manera:

async function miFuncionAsincrona() {
  try {
    let ficheros = await descargarFicheros();
    // Hacer cosas interesantes con los ficheros...
  } catch (error) {
    console.error(error);
  }
}

Al invocar esta función, ocurriría lo siguiente:

  1. Al llegar a la expresión con await se ejecuta la función descargarFicheros y se detiene la ejecución de la función miFuncionAsincrona en ese punto.
  2. Se pasa el control a la función que la invocó, devolviendo una promesa pendiente de resolución.
  3. Cuando se resuelve la promesa devuelta por descargarFicheros, se continúa con la ejecución de la función según proceda:
    • Si la promesa es resuelta, se asigna su valor a la variable ficheros y se continúa en la línea siguiente.
    • Si es rechazada, se pasa el control al bloque catch, asignando el valor del rechazo al identificador error.

Importante: el operador await debe usarse siempre dentro de una función declarada async, o el motor de JavaScript nos lo recordará con un inquietante error de sintaxis:

SyntaxError: await is only valid in async functions and async generators

SpiderMonkey

«Azúcar sintáctica»

La sintaxis async/await permite trabajar con promesas de una manera mucho más fácil de leer y de depurar. Por ejemplo, el siguiente código:

function miFuncion() {
  obtenerDatos('--consulta--').then(obtenidos => {
    // Hacer algo con los datos obtenidos
    procesarDatos(obtenidos).then(procesados => {
      // Hacer algo con los datos procesados
    });
  }).catch(error => {
    // Tratamiento de errores
  });
}

Con async/await quedaría así:

async function miFuncion() {
  try {
    let obtenidos = await obtenerDatos('--consulta--');
    // Hacer algo con los datos obtenidos
    let procesados = await procesarDatos(obtenidos);
    // Hacer algo con los datos procesados
  } catch (error) {
    // Tratamiento de errores
  }
}

Se diría que es código asíncrono escrito con «estilo síncrono», si ustedes me entienden. ¡Lo mejor de los dos mundos!

¿Puedes usarlo ya?

La siguiente tabla resume los entornos en los que ya es posible usar esta nueva sintaxis, y desde qué fecha y versión.

Promises Async functions
Google Chrome Feb 2014 (33) Dic 2016 (55)
Apple Safari Sep 2014 (7.1) Mar 2017 (10.1)
UC Browser Ago 2016 (11.8) Ago 2016 (11.8)
Mozilla Firefox Abr 2014 (29) Mar 2017 (52)
Opera Mar 2014 (20) Dic 2016 (42)
Internet Explorer Incompatible Incompatible
Microsoft Edge Jul 2015 (12) Abr 2017 (15)
Samsung Internet Abr 2016 (4) Oct 2017 (6.2)
Android Browser Jun 2014 (4.4.3) May 2017 (67)
Node.js Sep 2015 (4) Feb 2017 (7.6.0)
Fuente: caniuse.com

Como ves, la cuenta atrás ya está en marcha. A no ser que tu aplicación necesite ser compatible con navegadores seriamente obsoletos, es muy posible que ya puedas empezar a beneficiarte de este nuevo avance de JavaScript.

¿Cómo lo ves? ¿Estás ya usando esta sintaxis? ¿Te ha supuesto un gran cambio? ¿Cuál es tu característica favorita de ES2015+?

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.