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

21 February, 2014 Roel van Lisdonk 0 Comments 1 category

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>
<html>
<head>
    <title>Research page for jQuery.</title>
    <style type="text/css">
    
    </style>
</head>
<body>
    <div id="page">
        <button id="executeButton" type="button">Execute</button>
</div>
    <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.
                        deferred.resolve(value);

                        // Data in cache, so return a manual promise.
                        return deferred.promise();
                    }
                    else
                    {
                        // 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)
            {
                
                _serviceCache
                    .getItem(_serviceUrl) // Get data.
                    .done(function (data)
                    {
                        // Show data.
                        console.log(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.
        app.start();

    </script>
</body>
</html>