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:






Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.