Promesas en JavaScript

Promesas en JavaScript

Kervin Vasquez's photo
Kervin Vasquez

Published on Jul 11, 2021

5 min read

Subscribe to my newsletter and never miss my upcoming articles

Si eres nuevo en JavaScript o quiz谩 no has logrado comprender muy bien que son las promesas o como funcionan, espero que este articulo te ayude a entender este tema un poco m谩s 馃榿.

Por naturaleza JavaScript es un lenguaje sincrono, pero una de sus principales caracteristicas es que es capaz de ejecutar c贸digo de manera as铆ncrona gracias a la funcionalidad de las Web API de cada navegador. Esto permite que mientras tu estes en una pagina web, multiples tareas se puedan ejecutar simultaneamente, esto hace posible que, por ejemplo, puedas ver un video en Youtube y ver los comentarios en tiempo real sin que una tarea interfiera con la otra.

Por mucho tiempo la manera en que se trabajaba con codigo as铆ncrono en JavaScript era por medio de funciones que ejecutaban el codigo dentro de ellas y que al final pasaban el resultado de esa operaci贸n a otra funci贸n conocida como "callback", que era pasada como segundo argumento a dicha funci贸n. En el siguiente ejemplo, utilizo setTimeout para simular el codigo as铆ncrono pero esto bien pordr铆a ser una llamada a una API o la lectura de una base de datos.

function cuadrado(numero, callback) {

  setTimeout(function(){
      var resultado = numero * numero;
      calback(resultado);
  },5000);

}

function cubo(numero, callback) {
   setTimeout(function(){
       var resultado = numero * numero * numero;
      calback(resultado);
  },3000);
}

function duplicar(numero, callback){
    setTimeout(function(){
        var resultado = numero * 2;
      calback(resultado);
  },4000);
}

cuadrado(2,function (numeroCuadrado){
    cubo(numeroCuadrado,function(numeroAlCubo){
        duplicar(numeroAlCubo,function(numeroDuplicado){
            console.log(numeroDuplicado);//128
        });
    });
});

Quiza este ejemplo no muestre la totalidad del problema ya que son operaciones sincronas, pero puedes ver como cada funcion pasa el resultado de su operaci贸n a la funci贸n callback, y al final tenemos 3 funciones anidadas. Te imaginas si necesitaras realizar aun mas operaciones. Seria muy dificil de leer y de mantener. A este problema se le ha conocido como "callback hell馃槇"

Las promesas surgen para dar una solucion a este problema y facilitar la vida de los programadores.

Promesas

Las promesas son una manera de trabajar con c贸digo as铆ncrono y reducir el numero de funciones callbacks. Esta son creadas por medio de la instanciaci贸n de la clase Promise.

    const promesa = new Promise();

Una promesa es usualmente definidad como la representaci贸 de un valor que eventualmente estara disponible para su uso.

A pesar de que han existido por algun tiempo, se convirtieron en parte estandar de JavaScript en su version ES2015.

驴C贸mo funcionan las promesas?

Una vez que una promesa a sido invocada, esta entrara en estado "pendiente". Esto significa que el resto del codigo que invoco continuara la ejecuci贸n de manera normal hasta que la promesa resuelva un valor o sea rechazada debido a un error.

Al instanciar, o crear una nueva promesa, el constructor puede tomar dos argumentos. Los argumentos resolve y reject sirven para controlar el estado de una promesa despues de que entra en estado "pendiente".

El metodo resolve sirve para pasar el valor que fue resultado de la operaci贸n que ocurrio dentro de la promesa, si todo ocurrio correctamente.

El metodo reject sirve para pasar un valor que represente una excepci贸n o error occurrido dentro de la promesa.

Utilizando promesas podemos escribir el ejemplo anterior de la siguiente manera:

function cuadrado(numero) {
    return new Promise((resolve, reject)=>{
          setTimeout(function(){
              var resultado = numero * numero;
              resolve(resultado);
          },5000);
    });
}

function cubo(numero) {
    return new Promise((resolve, reject)=>{
         setTimeout(function(){
          var resultado = numero * numero * numero;
          resolve(resultado);
      },3000);
    });
}

function duplicar(numero){
  return new Promise((resolve, reject)=>{
         setTimeout(function(){
             var resultado = numero * 2;
              resolve(resultado);
          },4000);
   }); 
}

cuadrado(2)
.then(cubo)
.then(duplicar)
.then((numero)=>{
    console.log("Cualquier otra operacion con un callback");
    return numero;
})
.then(console.log) //128

A primera instancia, pareciera que el codigo se vuelve m谩s complejo, pero si lo lees poco a poco entederas la l贸gica. Cada funci贸n en lugar de regresar un valor en especifico, regresa una "Promesa" de que eventualmente resolvera un valor. Al momento de invocar la primera funci贸n que regresa una promesa, podemos capturar su resultado utilizando el metodo then al cual le tenemos que pasar una funcion para utilizar el valor que la promesa resuelva. A como vez esto hace que el c贸digo sea m谩s facil de leer.

Las promesas tambien nos permiten manejar excepciones o errores por medio del metodo catch este metodo es invocado cuando algo falla dentro de una promesa o cuando esta pasa a estado "rejected". Aqui te dejo un ejemplo:

function validarNumero(valor) {
    return new Promise((resolve, reject)=>{
        isNaN(valor) ? reject(`${valor} no es un numero`) : resolve(valor);
    });
}

function cuadrado(numero) {
    return new Promise((resolve, reject)=>{
          setTimeout(function(){
              var resultado = numero * numero;
              resolve(resultado);
          },5000);
    });
}

function cubo(numero) {
    return new Promise((resolve, reject)=>{
         setTimeout(function(){
          var resultado = numero * numero * numero;
          resolve(resultado);
      },3000);
    });
}

function duplicar(numero){
  return new Promise((resolve, reject)=>{
         setTimeout(function(){
             var resultado = numero * 2;
              resolve(resultado);
          },4000);
   }); 
}

validarNumero(2)
.then(cuadrado)
.then(cubo)
.then(duplicar)
.then(console.log) //128

validarNumero("Hola")
.then(cuadrado)
.then(cubo)
.then(duplicar)
.then(console.log)
.catch(console.log)// "Hola no es un numero"

Cuando se genera una excepci贸n, el resto de funciones encadenadas con el metodo then no seran ejecutadas y el codigo se saltara directamente al metodo catch.

Esta ejemplo te parecera un poco extra帽o, pero esto bien podria servir para validar si un usuario existe en una base de datos y ejectutar una acci贸n distinta si el usuario no existe o seguir con el resto del codigo en caso de que si exista.

Las promesas son muy utiles para hacer tu codigo mas facil de leer y de mantener, sin contar que muchos de los modulos de JavaScript que trabajan con funciones asincronas, hacen uso de promesas. Asi que es muy importante que conoscas como funcionan.

Espero que hayas entendido los fundamentos de las promesas en JavaScript, pero si tienes alguna pregunta, no dudes en escribirme y seguirme en mi cuenta de Instagram .

Share this