Skip to content

Deferred, Promises, Promesas

JavaScriptJQuery

 

 

$.Deferred. ¿Qué es?

El objeto deferred se introdujo en jQuery a partir de la versión 1.5 y provocó una importante mejora en las interfaces de programación asíncrona (y síncrona …) que se usaban hasta entonces. Es un objeto concatenable sobre el que se pueden registrar múltiples callbacks que se ejecutarán en función del resultado final de la deferred.

¿Como creamos uno?

Cuando creamos un objeto deferred mediante …

var deferred = new $.Deferred(); 
//o bien 
var deferred = $.Deferred();

Este objeto deferred puede estar en 3 estados:

pending: El objeto está en un estado incompleto
resolved: El objeto se ha resuelto
rejected: el objeto se ha rechazado;

Cuando lo creamos, por supuesto, estará “pending”.

Si llamados al método resolve() del objeto deferred lo pasaremos al estado “resolved”.

Por el contrario, si llamamos al método reject() lo pasaremos al estado “rejected”.

Usar el método done() para asociar un callback (o varios) que se ejecutarán cuando la deferred pase a “resolved”.

Usar el metodo fail() si en lugar de “resolved” pasa a “rejected”.

Además de done() y fail() hay otros muchos más métodos que nos permiten hacer otras cosas como:

always(): Ejecutará sus callbacks independientemente del estado al que pase la deferred

progress(): Ejecutará callbacks cuando la deferred emita notificaciones de progreso mediante notify()

notify(): Hace que se llamen las callbaks de progress()

then(): puedo usar then() para asociar callbacks para done, fail o progress

También tenemos otra serie de métodos para averiguar el estado de la deferred, por ejemplo

isRejected(): Para saber si ha sido rechazada

isResolved(): Para averigar si se ha resuelto

state(): Para comprobar el estado actual

Retornando promises

function wait() { 
    var deferred = $.Deferred(); 
    setTimeout(function() { 
        deferred.resolve(); 
    }, 5000); 
    return deferred.promise(); 


wait().done(function() { 
    alert("He esperado 5 segundos!!"); 
});

 

Los métodos deferred.resolve y deferred.reject además permiten devolver valores para ser utilizados por las funciones de devolución.

Función con deferred.resolve y deferred.reject devolviendo valores reutilizables

// función que calcula si un numero entero es par o impar
var isEven = function(number) {
 
    var dfd = $.Deferred();
 
    // resuelve o rechaza al objeto utilizando
    // y devuelve un texto con el resultado
    if (number%2 == 0){
        dfd.resolve('El número ' + number + ' es par');
    } else {
        dfd.reject('El número ' + number + ' es impar');
    }
 
    // devuelve al objeto diferido con su estado definido
    return dfd.promise();
 
}
 
isEven(2).then(
 
       function(result){
           console.log(result); // Registra 'El número 2 es par'
       },
 
       function(result){
           console.log(result);
       }
 
);

Nota

Es posible determinar el estado de un objeto diferido a través del método deferred.state. El mismo devuelve un string con alguno de estos tres valores: pendingresolved o rejected. Para más detalles sobre deferred.state, puede consultar http://api.jquery.com/deferred.state/.

Trackbacks

No Trackbacks

Comments

Display comments as Linear | Threaded

No comments

Add Comment

Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.
To leave a comment you must approve it via e-mail, which will be sent to your address after submission.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Form options

Submitted comments will be subject to moderation before being displayed.