Programación asíncrona con Javascript - Parte 2, Promesas (lo básico con ejemplos)

Hola de nuevoooo :D es hora de hablar un poco de las promesas, una promesa es asíncrona por naturaleza, representa un resultado que puede estar disponible ahora, en el futuro o nunca. Una promesa puede resolverse (devolver un resultado) o rechazarse (lanzar un error).

Crear una promesa en javascript es bastante simple, solamente es necesario pasar una función ejecutora que recibe dos parámetros, el primer parámetro es una función que debe llamarse cuando se resuelva la promesa (cuando se quiere devolver un resultado de la operación asíncrona) y el segundo parámetro es la función que se llamará en caso de que la promesa no se cumpla. Tiene la forma new Promise(function(resolver, rechazar){}). Como ejemplo:

// ahora creamos una promesa
var promesa = new Promise(function(resolve, reject) {
  // realizar alguna tarea
  var tareaExitosa = realizarMuchasOperaciones();
  if (tareaExitosa) {
    // resolvemos la promesa en caso de éxito
    resolve('Éxito');
  } else {
    // rechazamos la promesa en caso de error
    reject(new Error('Error al realizar la operación.'));
  }
});

Además, es posible crear promesas ya resueltas o rechazadas:

// para crear una promesa que sea exitosa
Promise.resolve("Promesa exitosa");
// para crear una promesa que sea rechazada
Promise.reject(new Error('Promesa rechazada'));

Cuando se quiere realizar alguna acción o transformación con los resultados de la promesa, se le añade el método then(). then() también nos ayuda a encadenar las promesas una tras otra.

Toda cadena de promesas debe tener el método catch() al final para poder agarrar cualquier error que pudiera presentarse en el proceso.

Por ejemplo, realizaremos una promesa que calculará asíncronamente un número entre 0 y 10, si el número es mayor a 5 la promesa se resuelve correctamente, si el número es menor a 5 la promesa se rechaza.

var promise = new Promise(function(resolve, reject) {
  setTimeout(function(){
    // calculamos un npumero aleatorio entre 0 y 10
    var num = parseInt( Math.random() * 10 );
    if ( num > 5) {
      // la promesa se resuelve si num es mayoa  5
      resolve('Promesa resuelta correctamente, el número es ' + num);
    } else {
      // la promesa se rechaza si numero es menor a cinco
      reject(new Error('Ha ocurrido un error, el número calculado es ' + num));
    }

  }, 2000);
});

// manejamos la promesa
promise.then(function(val){
  // la promesa se ha resuelto
  console.log(val);
}).catch(function(err){
  // la promesa ha sido rechazada
  console.log(err);
});

then() puede encadenarse, y debe devolver un valor (resolve) o debe lanzar un error (el error se pasará a catch).

var promise = new Promise(function(resolve, reject) {
  setTimeout(function(){
    resolve(10);
  }, 2000);
});

promise.then(function(val){
  // retorna un valor, por lo tanto la promesa se resuelve implicitamente
  // y pasará al siguiente then
    return val * 10;
  })
  .then(function(val2) {
    // resolvemos la promesa explicitamente
    // el resultado se pasa al siguiente then
    return Promise.resolve(val2 / 2);
  })
  .then(function(val3) {
    // imprimimos el resultado
    return console.log(val3)
  })
  .catch(function(err){
    // como no hubo error, nunca se imprime
    console.log(err);
  });

En caso de surgir un error (previsto o imprevisto), los siguientes then() no se ejecutan y se pasa directamente al catch().

Por ejemplo, lanzaremos un error en una promesa para ver el ordén en que se ejecutan las operaciones.

var promise = new Promise(function(resolve, reject) {
  setTimeout(function(){
    resolve(10);
  }, 2000);
});

promise.then(function(val){
    console.log('Primer then');
    return val * 10;
  })
  .then(function(val2) {
    console.log('Segundo then');
    if (val2 === 100) {
      throw new Error("Unaceptable, no permitimos el número cien en mi reino");
    }
    return Promise.resolve(val2 / 2);
  })
  .then(function(val3) {
    // imprimimos el resultado
    console.log('Tercer then');
    return console.log(val3)
  })
  .catch(function(err){
    // como no hubo error, nunca se imprime
    console.log('Catch');
    console.log(err);
  });

El resultado que nos muestra es:

Resultado de la ejecución de las promesas

Como podemos observar, se ejecutan el primer y el segundo then(), sin embargo, el tercer then() no se ejecuta pues lanzamos un error, entonces el proceso pasa directamente a catch().

Y eso es todo por ahora, en el siguiente post veremos conceptos más avanzados sobre promesas.

Saludos y keep coding!!!  ( ° _ ° )