IT:AD:Promise:HowTo:Understand The Basics

Starting with a traditional approach…

The first example shows how we process async operations (such as ajax calls), without promises, just traditional callbacks:

$(function(){
    DemoA();
});


function DemoA(){
    //Invoke the method passing callbacks:
    SimulateSomethingThatTakesTime(
        5,
        function(data){$("#r").html("Success: "+data);},
        function(data){$("#r").html("Fail: "+data);}
        );
}


function SimulateSomethingThatTakesTime(data, onSuccessCallback, onErrorCallback){
    // Take a second, then continue:
    window.setTimeout(
        function() {
            //simulate randomly successful/failed results
            //modifying original data differently:
            if (Math.round(Math.random())==1){
                if (onSuccessCallback){onSuccessCallback(data+1);}
            }else{
                if (onErrorCallback){onErrorCallback(data-1);}
            }
        },1000);
}

The second example does exactly the same thing, but using JQuery's Promise pattern:

$(function(){
    DemoB();
});


function DemoB(){
    SimulationUsingPromises(5)
    .then(
        //Success callback is first arg:
        function(data){$("#r").html("Success: "+data);},
        //Failure callback is second arg:
        function(data){$("#r").html("Fail: "+data);}
         );
}



function SimulationUsingPromises(data){
    //setup a deferred object:
    var deferred = $.Deferred();
    
    // Take a second, then invoke a callback:
    window.setTimeout(
        function() {
            if (Math.round(Math.random())==1){
                //invoke resolve, passing results:
                deferred.resolve(data+1);
            }else{
                //invoke reject, passing results:
                deferred.reject(data-1);
            }
        },1000);
    //important: pass back the promise handle:
    return deferred.promise();
}

The following is the same as Example 2 – but cleaner, using defined methods, rather than anonymous methods, and implicitly passing args.

$(function(){
    DemoC();
});


function DemoC(){
    SimulationUsingPromises(5).then(DoSuccess, DoFail);
}


function SimulationUsingPromises(data){
    //setup a deferred object:
    var deferred = $.Deferred();
    
    // Take a second, then invoke a callback:
    window.setTimeout(
        function() {
            if (Math.round(Math.random())==1){
                //invoke resolve, passing results:
                deferred.resolve(data+1);
            }else{
                //invoke reject, passing results:
                deferred.reject(data-1);
            }
        },1000);
    //important: pass back the promise handle:
    return deferred.promise();
}

//The defined callback method:
function DoSuccess(data){$("#r").html("Success: "+data);}

//The defined callback method:
function DoFail(data){$("#r").html("Fail: "+data);}

• http://jsfiddle.net/skysigal/tcz45/
• http://www.danieldemmel.me/blog/2013/03/22/an-introduction-to-jquery-deferred-slash-promise/