How to combine synchronous and asynchronous JavaScript function calls for getting data from client side cache or REST service (with jQuery).



When the user clicks on the "Execute" button for the first time, the data will be retrieved from a REST service.

The second time the data will be retrieved from the cache.


The comments in the code will explain, how the we can return a manual promise, when data is retrieved from cache and a Ajax promise, when the data is retrieved from a REST service.


<!DOCTYPE html>
    <title>Research page for jQuery.</title>
    <style type="text/css">
    <div id="page">
        <button id="executeButton" type="button">Execute</button>
    <script type="text/javascript" src="../../Libraries/jQuery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        "use strict";

        var cacheFactory = (function ()
            var CacheComponent = function ()
                var self = this;
                var _cache = {};

                // Returns a promise.
                // De ".done" function of this promise can be used to get to the data.
                self.getItem = function (key)
                    // Check if key exists in de cache.
                    if (_cache.hasOwnProperty(key))
                        // Get value from cache.
                        var value = _cache[key];

                        // Create a manual promise.
                        var deferred = $.Deferred();

                        // Imediatly set the manual promise to "completed", any done functions added to the resulting promise, will be called immediately.

                        // Data in cache, so return a manual promise.
                        return deferred.promise();
                        // No data in cache, so return ajax promise.
                        return $.ajax({
                            url: key,
                            type: "GET"
                        }).done(function (data)
                            // Put the data from the service in the cache and for the purpose of demonstration add some text, 
                            // to show the difference between data from the service and data from the cache.
                            _cache[key] = data + " Data from cache!";

            var _factory = {};
            _factory.create = function ()
                // Create a new cache object.
                return new CacheComponent();

            return _factory;

        var app = (function ()
            var self = {};
            var _serviceUrl = "/Api/Service";

            // Create a new cache object by calling the "create" function on the "cacheFactory".
            var _serviceCache = cacheFactory.create();
            // Click eventhandler.
            self.handleExecuteButtonClick = function (event)
                    .getItem(_serviceUrl) // Get data.
                    .done(function (data)
                        // Show data.

            // Fires when the application starts.
            self.start = function ()
                console.log("Document ready!");

                // Wire up a "click" evenhandler.
                var $executeButton = $("#executeButton");
                $executeButton.on("click", self.handleExecuteButtonClick);

            return self;

        // Start the application.





The Web API 2 routes used:



The Web API 2 controller: