"Luego te llamo":

Implementando Promises en JavaScript

 

 

{ "by": "@joelalejandro",
"project": "CbaJS 1.0",
"date": new Date(2013, 9, 18) }

 

 

No prometas aquello que no puedes cumplir.

¿Qué es una promesa?

En sentido general: Es la expresión de la voluntad de dar a alguien o hacer por él algo. Es un augurio, indicio o señal que hace esperar algún bien.

Fuente: Diccionario de la Real Academia Española

¿Qué es una promesa?

En sentido de Derecho: Es un contrato por el cual una de las partes, o ambas, se obligan, dentro de cierto lapso, sea por el vencimiento de un plazo o por el cumplimiento de una condición, a celebrar un contrato futuro determinado.

Fuente: Diccionario de la Real Academia Española

¿Qué es una promesa?

En Ciencias de la Computación: Es un objeto que actúa como preliminar al resultado del cálculo aún en ejecución.

Fuente: Wikipedia

¿Qué es una promesa?

En JavaScript: Es una implementación de un patrón de diseño para controlar llamadas (a)sincrónicas.

Nada nuevo.

Promise existe hace años.

Veamos un ejemplo.

jQuery: GET vía Ajax

$.get("/mis/cosas", { 
  success: function(...) {
    /* terminé! */
  },
  error: function(...) {
    /* salió todo mal :( */
  }
});

Un closure anónimo dentro de $.get,
que se ejecuta al terminarse la petición HTTP.

jQuery: GET vía Ajax + patrón Promise

$.get("/mis/cosas").done(function(data) {
  /* terminé! :D */
}).fail(function() {
  /* salió todo mal :( */
});

Como el objeto retornado por $.get es una extensión de Deferred (el equivalente de Promise en jQuery), es posible encadenar acciones al "contrato".

jQuery: GET vía Ajax + patrón Promise (2)

$.get("/mis/cosas").done([
  function(d){ /* terminé! :D */ },
  function(d){ /* terminé! :D :D */ },
  function(d){ /* terminé! :D :D :D */ }
]).fail(function() {
  /* salió todo mal :( */
});

Nada más simple que un array de callbacks para encadenar acciones al "contrato".

Una simple promesa es...

Hacer p(), y luego q().

Promise(p).then(q);

 

p ⇒ q

Una simple promesa es...

Hacer p(), y luego q(), r() y s().

Promise(p).then(q).then(r).then(s);

 

p ⇒ q ⇒ r ⇒ s

A veces es difícil la promesa.

Hacer p(), q() y r(). Al finalizar todas, hacer s().

Promise(p, q, r).then(s);

 

(p ^ q ^ r) ⇒ s

Ventajas
de todo esto?

Utilizando Promise.js

Promise.js es una librería con full cross-browser compatibility (IE5.5+, FF1.5+). Incluye la implementación básica del patrón de diseño, junto con unos métodos para peticiones HTTP asincrónicas.

Instanciando Promise

function asyncearAlgo(x) {
  var p = new Promise();

  setTimeout(function() {
    p.done();
  }, 5000);

  return p;
};

¿Qué nos permite esto?

Instanciando Promise (2)

function asyncearAlgo(x) { ... }

asyncearAlgo("bla bla").then(function() {
  alert("Listo, ya asinqueé");
});

Una forma bellísima de manejar el asincronismo.

Instanciando Promise (3)

asyncearAlgo("bla bla").then(function() {
  alert("Listo, ya asinqueé");
}).then(function() {
  alert("Listo, ya asinqueé");
}).then(function() {
  alert("Listo, ya asinqueé");
});

Las cosas claras con AJAX

promise.get("/mis-cosas").then(
   function(error, text, xhr) {
     var div = document.getElementById("mis-cosas");
     div.innerHTML = text;
   }
));

Si insistimos con jQuery...

$.get("/mis-cosas").done(
  function(data) { ; }
).error(
  function() { alert("oops"); }
);

Y así, sucesivamente...

Hablando de promesas...

"Luego te llamo":

Implementando Promises en JavaScript

 

 

{ "by": "@joelalejandro",
"project": "CbaJS 1.0",
"date": new Date(2013, 9, 18) }