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:

//Declararla:
async function regresarSaludo() {
 return "Me gusta JS";
}

// Llamarla y usarla como promesa
regresarSaludo()
 .then(resultado => {
  console.log("El resultado es: ", resultado);
 })

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:

async function regresarSaludo() {
 return "Me gusta JS";
}
async function otraFuncion() {
 let saludo = await regresarSaludo();
 // Este código no se ejecuta hasta que la promesa
 // de arriba se resuelve ;)
 console.log("El saludo es: ", saludo);
}
otraFuncion();

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.

async function regresarSaludo() {
 return "Me gusta JS";
}
otraFuncion()
.then(resultado => {
  
})
.catch(err => {

})
.finally(()=>{
  
});

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 function regresarSaludo() {
 return "Me gusta JS";
}
async function otraFuncion() {
 try {
  let saludo = await regresarSaludo();
  // Hasta aquí todo bien
  console.log(saludo);
 } catch (e) {
  // Error
 } finally {
  // Finally
 }
}
otraFuncion();

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:

function obtenerJsonConPromesas() {
 return fetch("https://httpbin.org/json")
  .then(respuesta => respuesta.json())
  .then(json => {
   return json;
  });
}

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

Con async y await

Mejor usamos await:

async function obtenerJsonConAsync() {
 try {
  let respuesta = await fetch("https://httpbin.org/json")
  let json = await respuesta.json();
  return json;
 } catch (e) {
  console.log("Error: ", e)
 }
}

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:

return new Promise((resolve, reject) => {
    conexion.query(`insert into productos
    (nombre, precio)
    values
    (?, ?)`,
        [nombre, precio], (err, resultados) => {
            if (err) reject(err);
            else resolve(resultados.insertId);
        });
});

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

En cambio, con async:

async insertar(nombre, precio) {
    let resultados = await conexion.query(`insert into productos
    (nombre, precio)
    values
    ($1, $2)`, [nombre, precio]);
    return resultados;
}

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