¿Qué es async/await?

En se introducen las palabras clave async y await, que no son más que una forma alternativa de gestionar las promesas en Javascript. Se trata de un mecanismo de azúcar sintáctico para gestionar promesas, y escribir código de una forma más simple, directa y similar a lo que solemos estar acostumbrados en la programación síncrona.

El problema del `.then()`

Repasemos un fragmento de código donde manejamos promesas mediante .then(), como vimos en capítulos anteriores. Cuando no estás acostumbrado a trabajar con promesas, este código se lee de forma diferente a como se escribe, no es secuencial y puede ser difícil de entender:

fetch("/data.json")
  .then(response => response.json())
  .then(data => console.log("Código asíncrono", data));

console.log("Código síncrono.");

Utilizando el mecanismo de async/await también seguiremos trabajando con promesas, sin embargo, hay ciertos cambios importantes que lo simplifican bastante:

1️⃣ No encadenamos mediante .then(), sino que es más natural.
2️⃣ La palabra await parece «pausar» las funciones, algo mucho más fácil de entender.
3️⃣ Al no indentar .then(), no hay sensación de tener múltiples niveles.
4️⃣ Los desarrolladores que aún no comprenden la asincronía, intentarán «pasar» los datos del interior del .then() a su exterior, como harían en un contexto síncrono.

Por estas y otras razones es posible que async/await te interese más para escribir código.

Las funciones asíncronas

Vamos a detenernos un momento a pensar esto desde la base. Más adelante, vamos a empezar a utilizar funciones asíncronas. Vamos a definir dos funciones básicas exactamente iguales, que devuelvan lo mismo, pero una síncrona y otra asíncrona.

Como puedes ver, la única diferencia entre ambas versiones es que le hemos añadido la palabra clave async antes de definir la función:

function sincrona() { return 42; }
async function asincrona() { return 42; }

sincrona();   // 42
asincrona();  // Promise <fulfilled>: 42

const sincrona = () => 42;
const asincrona = async () => 42;

sincrona();   // 42
asincrona();  // Promise <fulfilled>: 42

En el caso de la función sincrona() devuelve directamente el valor 42. En el caso de la función asincrona() devuelve una promesa cumplida inmediatamente, con el valor 42.