"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?

Ordenado

Resulta más fácil entender qué está haciendo el código mediante construcciones como .done() o .then().

Flexible

A diferencia de un modelo basado en eventos, podemos incorporar callbacks en cualquier momento, sin importar el estado de la promesa.

Uniforme

Se emplea un mismo patrón de diseño para tareas sincrónicas y asincrónicas.

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) }