Las promesas en JavaScript son una manera más elegante de trabajar con código asíncrono que los callbacks, pues evitan el famoso callback hell. Aunque actualmente las promesas o promises de JavaScript están siendo remplazadas por async y await es bueno saber cómo funcionan las mismas.

Hoy vamos a ver cómo funcionan las promesas con JavaScript, además de aprender a crear promesas y devolverlas en una función.

El problema con los callbacks

Debido a la naturaleza asíncrona de JavaScript, debería existir una manera de ejecutar código cuando determinada opción termine, sin saber cuándo terminará.

Para ello se comenzaron a usar los callbacks, pero el problema viene cuando se anidan:

obtener_pagina("https://parzibyte.me", (err, html) => {
  remover_etiquetas(html, (err, texto) => {
    guardar_texto_en_bd(texto, (err) => {
      // Listo
    });
  });
});

Si anidamos más y más cosas, al final tendremos un código no tan legible.

Las promesas vienen a solucionar eso.

Promesas en JavaScript

Las promesas usan then, catch y finally. En lugar de especificar un callback, se especifica un “then” o “y entonces”.

De esta manera las promesas se pueden anidar, y para manejar los errores se cuenta con finally y catch:

obtener_pagina("https://parzibyte.me")
  .then(html => remover_etiquetas(html))
  .then(texto => guardar_texto_en_bd(texto))
  .then(() => {
    // Hemos terminado
  })
  .catch(err => {
    // Aquí manejamos el error
  })
  .finally(() => {
    // Se ejecuta siempre, sin importar que haya errores
  })

Lo único que tenemos que hacer en la función es regresar una promesa para que la misma pueda ser anidada. Si todo va bien, se ejecuta el then, y si no, se pueden manejar con catch y err.

Promise, resolve y reject

Muchas funciones nativas de JavaScript ya incorporan las promesas, por ejemplo, fetch.

Nosotros también podemos crear nuestras propias promesas usando la clase Promise. Para crear una promesa pasamos una función como primer argumento.

Esa función tendrá un resolve y un reject, que serán a su vez funciones. Si llamamos a resolve, será llamado el then en la promesa, y si la rechazamos con reject, será llamado el catch en caso de que exista.

Por ejemplo veamos esta función para obtener datos de MySQL convirtiendo un callback a una promesa:

obtener() {
        return new Promise((resolve, reject) => {
            conexion.query(`select id, nombre, precio from productos`,
                (err, resultados) => {
                    if (err) reject(err);
                    else resolve(resultados);
                });
        });
    },

La librería de MySQL funciona con callbacks, pero podemos adaptarla para que funcione con promesas.

En el otro lado, cuando se invoque a esta función, su uso podría ser así:

productosModel
.obtener()
.then(productos => {
    res.render("productos/ver", {
        productos: productos,
    });
})
.catch(err => {
    return res.status(500).send("Error obteniendo productos");
});

El método devolverá una promesa, así que simplemente esperamos a que se resuelva, o atrapamos el error.

Todo esto se puede hacer para remplazar a los callbacks.