Creating a custom service that utilizes $cacheFactory

Question

Creating a custom service that utilizes $cacheFactory

Utilizing $cacheFactory to store configurations and user data for one-time retrieval:

var cache = $cacheFactory("Temp");

    var getCachedData = function (url) {

        var data = cache.get(url);

        var deferred = $q.defer();

        if (data) {
            deferred.resolve(data);
        } else {
            readFromServer(url).then(function(result) {
                cache.put(url, result);
                deferred.resolve(result);
            });
        }
        return deferred.promise;
    };

    return {
        GetCachedData: getCachedData
    };

If the service receives null data, it will make a call to the server. Otherwise, it will retrieve the data from the cache. If a second call is made before the first completes, how can we implement a lock mechanism similar to C# in JavaScript?

javascript angularjs

Answer 1

Answer №1

To prevent multiple calls to the same API, consider implementing a solution like the following (not tested but should function properly):

var isDataRetrieving = false;
var deferredQueue = [];

var fetchData = function(url) {
    var data = cache.get(url);

    var deferred = $q.defer();

    if (data) {
        deferred.resolve(data);
    } else if (isDataRetrieving) {
        deferredQueue.push(deferred);
    } else {
        isDataRetrieving = true;
        deferredQueue.push(deferred);

        fetchDataFromServer(url).then(function(result) {
            cache.put(url, result);
            
            for(var i = 0; i < deferredQueue.length; i++) {
                deferredQueue[i].resolve(result);
            }
        });
    }
    return deferred.promise;
};

Here's how it operates:

If the data is already in the cache, immediately return it by resolving the deferred
If the data is not cached and isDataRetrieving is false, initiate the request and set isDataRetrieving to true
If the data is not cached and isDataRetrieving is true, indicating another call is ongoing, add the deferred to an array without taking any action

After the single call completes, resolve each deferred stored in the deferredQueue array to deliver the data to every caller.

Does this approach meet your requirements?

Answer 2

To prevent multiple calls to the same API, consider implementing a solution like the following (not tested but should function properly):

var isDataRetrieving = false;
var deferredQueue = [];

var fetchData = function(url) {
    var data = cache.get(url);

    var deferred = $q.defer();

    if (data) {
        deferred.resolve(data);
    } else if (isDataRetrieving) {
        deferredQueue.push(deferred);
    } else {
        isDataRetrieving = true;
        deferredQueue.push(deferred);

        fetchDataFromServer(url).then(function(result) {
            cache.put(url, result);
            
            for(var i = 0; i < deferredQueue.length; i++) {
                deferredQueue[i].resolve(result);
            }
        });
    }
    return deferred.promise;
};

Here's how it operates:

If the data is already in the cache, immediately return it by resolving the deferred
If the data is not cached and isDataRetrieving is false, initiate the request and set isDataRetrieving to true
If the data is not cached and isDataRetrieving is true, indicating another call is ongoing, add the deferred to an array without taking any action

After the single call completes, resolve each deferred stored in the deferredQueue array to deliver the data to every caller.

Does this approach meet your requirements?

Creating a custom service that utilizes $cacheFactory

Answer №1

Similar questions

Pulling down the data with Ajax "GET"

Automatically adjusting the locale settings upon importing the data

Executing a series of AJAX requests within a loop

Guide on Linking a Variable to $scope in Angular 2

Uncovering the secrets of accessing req.body through expressjs

What are the steps for updating an NPM package that was installed from a Git repository?

Restrict access to PHP scripts to only be allowed through AJAX requests

The useEffect function is failing to execute when deploying on Vercel with Vite and React Router

ESLint warning: Potentially risky assignment of an undetermined data type and hazardous invocation of an undetermined data type value

How to access a grandchild's property using a string in JavaScript

Modify the text inside a div based on the navigation of another div

Creating a personalized ESLint rule specifically for Redux reducers

Is there an HTML code block available for embedding an HTML snippet?

What is the best way to define a variable in EJS?

Steps for executing the function in the specifications - Protractor

The absence of localStorage is causing an error: ReferenceError - localStorage is not defined within the Utils directory in nextjs

Is there a way to make the image above change when I hover over the thumbnail?

Struggling to retrieve user input from a textfield using React framework

Tips on keeping a floating sidebar afloat as ajax content loads

Customizing vertex sizes in BufferGeometry for diverse shapes