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 .