Promesas en JavaScript

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

2 comentarios en “Promesas en JavaScript”

  1. Pingback: Callbacks, código asíncrono y funciones anónimas en Javascript - Parzibyte's blog

  2. Pingback: Async y await en JavaScript - Parzibyte's blog

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *