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:
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:
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:
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.
Si llamamos a una función que regresa una promesa y lo queremos hacer con await, se hace con un try catch y finally.
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:
Pero debemos usar los then y eso es un poquito complicado.
Con async y await
Mejor usamos await:
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:
Tenía que devolver una promesa forzosamente, y rechazarla o resolverla.
En cambio, con async:
La ventaja de esto es que del otro lado en donde se usa se sigue usando como promesa.
