Using jQuery Deferred Objects and Promises Instead of Callbacks

Home > Blogs > Developer Visual Studio / ASP.NET > Using jQuery Deferred Objects and Promises Instead of Callbacks

Using jQuery Deferred Objects and Promises Instead of Callbacks

Added by Dan Wahlin March 8, 2013

In a previous post jQuery Tip #7 – Consolidating jQuery Ajax Calls I talked about how Ajax calls can be consolidated into a JavaScript object to promote re-use and simplify maintenance. In that post I showed how the Revealing Module Pattern can be used to provide a more structured approach and how a callback can be passed into functions within the object. Once individual Ajax calls complete the callback can be invoked so that the caller is able to access the returned data.

The following code shows an example of a simple object named dataService that follows the Revealing Module Pattern and has several Ajax functions in it. Note that each function accepts a callback as a parameter and that the callback is invoked to return the data to the caller.

var dataService = new function () {
    var serviceBase = &#39;/DataService/&#39;,
    getAccount = function (acctNumber, callback) {
        $.getJSON(serviceBase + &#39;GetAccount&#39;, 
          { acctNumber: acctNumber },
          function (data) {
              callback(data);
          });
    },

    getMarketIndexes = function (callback) {
        $.getJSON(serviceBase + &#39;GetMarketIndexes&#39;, function (data) {
            callback(data);
        });
    },

    getQuote = function (sym, callback) {
        $.getJSON(serviceBase + &#39;GetQuote&#39;, { symbol: sym }, 
         function (data) {
            callback(data);
        });
    },

    getTickerQuotes = function (callback) {
        $.getJSON(serviceBase + &#39;GetTickerQuotes&#39;, function (data) {
            callback(data);
        });
    };

    return {
        getAccount: getAccount,
        getMarketIndexes: getMarketIndexes,
        getQuote: getQuote,
        getTickerQuotes: getTickerQuotes
    };

} ();

var dataService = new function () {

var serviceBase = '/DataService/',

getAccount = function (acctNumber, callback) {

$.getJSON(serviceBase + 'GetAccount',

{ acctNumber: acctNumber },

function (data) {

callback(data);

});

getMarketIndexes = function (callback) {

$.getJSON(serviceBase + 'GetMarketIndexes', function (data) {

callback(data);

});

getQuote = function (sym, callback) {

$.getJSON(serviceBase + 'GetQuote', { symbol: sym },

function (data) {

callback(data);

});

getTickerQuotes = function (callback) {

$.getJSON(serviceBase + 'GetTickerQuotes', function (data) {

callback(data);

});

};

return {

getAccount: getAccount,

getMarketIndexes: getMarketIndexes,

getQuote: getQuote,

getTickerQuotes: getTickerQuotes

};

} ();

Although this code works fine, by forcing a callback to be passed as a parameter the parameter signature of each function is polluted somewhat. Even worse, no error callback is defined so if an error occurs the caller of the dataService object may be left in the dark which will more than likely leave the user in the dark as well if something goes wrong.

JavaScript libraries such as jQuery, Q.js, and others support the concept of a deferred object and allow access to a promise. For example, jQuery's getJSON()function automatically returns a deferred object/promise to callers. That means that the caller receives an object immediately after calling an asynchronous Ajax function and can use it to handle the success and error callback functionality themselves rather than relying on the function to invoke a callback as in the previous code.

The following code shows an improved version of the callback code shown earlier. Notice that no callback parameter is passed into the different functions and that the result of the getJSON() call (a deferred object) is returned instead.

var dataService = new function () {
    var serviceBase = &#39;/api/dataService/&#39;,
        getAccount = function(acctNumber) {
            return $.getJSON(serviceBase + &#39;account&#39;, 
            { acctNumber: acctNumber });
        },

        getMarketIndexes = function() {
            return $.getJSON(serviceBase + &#39;marketIndices&#39;);
        },

        getQuote = function(sym) {
            return $.getJSON(serviceBase + &#39;quote&#39;, { symbol: sym });
        },


        getTickerQuotes = function() {
            return $.getJSON(serviceBase + &#39;tickerQuotes&#39;);
        };

    return {
        getAccount: getAccount,
        getMarketIndexes: getMarketIndexes,
        getQuote: getQuote,
        getTickerQuotes: getTickerQuotes
    };

} ();

var dataService = new function () {

var serviceBase = '/api/dataService/',

getAccount = function(acctNumber) {

return $.getJSON(serviceBase + 'account',

{ acctNumber: acctNumber });

getMarketIndexes = function() {

return $.getJSON(serviceBase + 'marketIndices');

getQuote = function(sym) {

return $.getJSON(serviceBase + 'quote', { symbol: sym });

getTickerQuotes = function() {

return $.getJSON(serviceBase + 'tickerQuotes');

};

return {

getAccount: getAccount,

getMarketIndexes: getMarketIndexes,

getQuote: getQuote,

getTickerQuotes: getTickerQuotes

};

} ();

Consumers of the dataService object can now call functions, handle the deferred object that's returned and then wire up success and error functions. An example of doing that is shown next:

dataService.getMarketIndexes().done(renderMarketTiles);
dataService.getAccount().done(accountNumber);

1 2	dataService.getMarketIndexes().done(renderMarketTiles); dataService.getAccount().done(accountNumber);

These two calls handle the success callback but don't handle errors. To do that you can chain a fail() function onto the previous code as shown next:

dataService.getMarketIndexes().done(renderMarketTiles)
                              .fail(handleError);

dataService.getAccount().done(accountNumber)
                        .fail(handleError);

dataService.getMarketIndexes().done(renderMarketTiles)

.fail(handleError);

dataService.getAccount().done(accountNumber)

.fail(handleError);

By using deferred objects and promises you can handle asynchronous callbacks in a more standardized way and provide a better to process success and error situations. You can also clean up the parameter signature of any Ajax methods that you may call and re-use throughout an application.

Enjoy!
Dan Wahlin Microsoft MVP
.NET Developer Instructor
Interface Technical Training

Subscribe to this author's posts feed via RSS