En este post voy a hablar sobre async y await en JavaScript.

El lenguaje JS es asíncrono y por lo tanto debemos saber cómo funciona esa manera de trabajar. Para trabajar con código asíncrono tenemos 3 formas:

1. Usando callbacks
2. Promesas
3. Async y Await

En este post voy a explicar cómo funciona async y await.

Async

Para definir una función asíncrona, indicamos async antes de su nombre. Por ejemplo:

async function obtenerJson(){/*magia aquí*/}

Una función asíncrona devuelve siempre una promesa, aunque no lo especifiquemos. Es decir, no debemos regresar un new Promise, podemos devolver cualquier cosa y será encerrada en una promesa:

See the gist on github.

Así que async siempre regresará una promesa, y podemos usarla con then, catch, finally, etcétera.

Await

await solo puede usarse dentro de una función declarada como asíncrona, y permite omitir el then de una promesa. La sintaxis es:

let valor = await promesa;

Cuando se resuelva la promesa, valor tendrá lo que traería el then. Veamos una llamada a la función asíncrona creada anteriormente:

See the gist on github.

Como se puede observar, no estamos esperando el then, sino que await lo hace por nosotros.

Lo mejor de esto es que las funciones nativas (como fetch) que devuelven promesas, pueden ser usadas con await.

Manejo de errores

Se pueden manejar errores normalmente.

Si declaramos una función con async y la llamamos como promesa, podemos usar los métodos catch, finally, etcétera.

See the gist on github.

Si llamamos a una función que regresa una promesa y lo queremos hacer con await, se hace con un try catch y finally.

See the gist on github.

Async y await son azúcar sintáctica

Syntactic sugar es una manera de “endulzar” nuestro código y hacerlo, de alguna manera, más legible para el ser humano mientras dejamos que el compilador o intérprete lo entienda de la manera correcta.

Pues bien, async y await son azúcar sintáctica de las promesas de JavaScript. Cuando declaramos una función como asíncrona, su resultado será siempre una promesa.

Esto se explica mejor con código. Vamos a comparar la función fetch.

Con promesas

Para obtener el JSON de una página se puede usar el siguiente código:

See the gist on github.

Pero debemos usar los then y eso es un poquito complicado.

Con async y await

Mejor usamos await:

See the gist on github.

De esta manera, cada línea de nuestro código espera a que la anterior “termine” para ejecutarse.

Más código de async y await

Estoy trabajando en un CRUD de PostgreSQL con JavaScript; basándome en un CRUD de MySQL.

En el CRUD que menciono, utilizo promesas, pero ahora que estoy usando PostgreSQL estoy cambiando a las mismas por async y await así que veamos el antes y después.

Con promesas, el método para insertar datos era:

See the gist on github.

Tenía que devolver una promesa forzosamente, y rechazarla o resolverla.

En cambio, con async:

See the gist on github.

La ventaja de esto es que del otro lado en donde se usa se sigue usando como promesa.