Using $promises efficiently in $ajax

#web development

#jquery

#promises

#ajax

#javascript

#deferred

jQuery deferreds and promises have been around for quite some time now, but it's still very common to find projects where they could very well be used to make the code a bit tidier.

Let's say we want a pretty way to make requests to an API.
You'd simply want to call something like:

myApp.searchFor('grumpy cat');

... and immediately have the results returned, or to be able to easily attach multiple callbacks to this without making a mess out of your code.

Using the module pattern, we can make the requests in a very tidy and semantic manner.

var app = {

    // Base URL, if there's any
    getUrl: function (string) {
        return 'http://url-to-api/search/' + string;
    },

    // Build an object of requests.
    // Here's one for a search, which
    // takes only a query value.

    buildRequests: function () {
        this._api = {
            search: function (query) {
                // Creating a deferred
                var deff = $.Deferred();

                $.ajax({
                    url:     this.getUrl(query),
                    success: deff.resolve,
                    fail:    deff.reject
                });

                // We'll work with the outcome
                // of this promise!
                return deff.promise();
            }.bind(this)
        };
    }

    // We perform the search request,
    // and check the state of the request.
    // We can attach multiple callbacks.

    searchRequest: function (query) {
        this._api.search(query)
                 .done(function (data) {
                    console.log('Got data!');
                    return data;
                 })
                 .done(function (data) {
                    console.log('We can attach another callback');
                 })
                 .fail(function (data) {
                    console.log('Failure');
                 })
    }
};

// And we use it like this:
app.buildRequests();
app.searchRequest('cute kittens');