Storing a promise object within an AngularJS service

Question

Storing a promise object within an AngularJS service

Incorporating dynamic loading of a static resource in AngularJS using Promises is my goal. The challenge lies in having multiple components on the page that may or may not require the same static resource from the server, depending on which are displayed dynamically. Once loaded, the resource can be cached for the duration of the application.

Although I have implemented this mechanism, my proficiency in Angular and Promises is still developing. Therefore, I am seeking validation regarding the effectiveness of my solution/approach.

var data = null;
var deferredLoadData = null;

function loadDataPromise() {
  if (deferredLoadData !== null)
    return deferredLoadData.promise;

  deferredLoadData = $q.defer();

  $http.get("data.json").then(function (res) {
    data = res.data;
    return deferredLoadData.resolve();
  }, function (res) {
    return deferredLoadData.reject();
  });

  return deferredLoadData.promise;
}

This approach ensures that only one request is sent, and all subsequent calls to `loadDataPromise()` will receive the initial promise. This method appears to handle requests that are in progress or already completed successfully.

However, I am uncertain whether caching Promises is considered an optimal solution. Is this practice advisable?

javascript angularjs promise angular-promise

Answer 1

Answer №1

Is this the correct approach to solving the problem?

Absolutely. Utilizing memoization on functions that return promises is a widely used technique to prevent redundant execution of complex asynchronous tasks. The promise simplifies caching by treating ongoing and completed operations as the same promise for the resultant value.

Is this the optimal solution?

No, relying on a global variable like `data` and resolving with `undefined` does not align with the intended usage of promises. It is recommended to fulfill the promise with the actual result from `data`, enhancing code readability and efficiency:

var dataPromise = null;

function getData() {
    if (dataPromise == null)
        dataPromise = $http.get("data.json").then(function (response) {
           return response.data;
        });
    return dataPromise;
}

Instead of using

loadDataPromise().then(function() { /* use global */ data })

, you can simply leverage

getData().then(function(data) { … })

.

To refine the pattern further, consider encapsulating `dataPromise` within a closure scope and be mindful of handling multiple promises when `getData` requires parameters such as a URL.

Answer 2

Is this the correct approach to solving the problem?

Absolutely. Utilizing memoization on functions that return promises is a widely used technique to prevent redundant execution of complex asynchronous tasks. The promise simplifies caching by treating ongoing and completed operations as the same promise for the resultant value.

Is this the optimal solution?

No, relying on a global variable like `data` and resolving with `undefined` does not align with the intended usage of promises. It is recommended to fulfill the promise with the actual result from `data`, enhancing code readability and efficiency:

var dataPromise = null;

function getData() {
    if (dataPromise == null)
        dataPromise = $http.get("data.json").then(function (response) {
           return response.data;
        });
    return dataPromise;
}

Instead of using

loadDataPromise().then(function() { /* use global */ data })

, you can simply leverage

getData().then(function(data) { … })

.

To refine the pattern further, consider encapsulating `dataPromise` within a closure scope and be mindful of handling multiple promises when `getData` requires parameters such as a URL.

Answer 3

Answer №2

To simplify this task, I developed a service named defer-cache-service that eliminates the need for repetitive code. It is written in Typescript, but you can also access the compiled JavaScript file on Github. Check out the source code.

Here's an example:

function loadCached() {
   return deferCacheService.getDeferred('cache.key1', function () {
      return $http.get("data.json");
   }); 
}

and then use it like this:

loadCached().then(function(data) {
//...
});

It's important to note that if multiple parts are calling the same loadDataPromise simultaneously, you need to include this check:

if (defer && defer.promise.$$state.status === 0) {
   return defer.promise;
}

Otherwise, duplicate calls to the backend will be made unnecessarily.

Answer 4

To simplify this task, I developed a service named defer-cache-service that eliminates the need for repetitive code. It is written in Typescript, but you can also access the compiled JavaScript file on Github. Check out the source code.

Here's an example:

function loadCached() {
   return deferCacheService.getDeferred('cache.key1', function () {
      return $http.get("data.json");
   }); 
}

and then use it like this:

loadCached().then(function(data) {
//...
});

It's important to note that if multiple parts are calling the same loadDataPromise simultaneously, you need to include this check:

if (defer && defer.promise.$$state.status === 0) {
   return defer.promise;
}

Otherwise, duplicate calls to the backend will be made unnecessarily.

Answer 5

Answer №3

This specific pattern is designed to store in cache the initial result and then retrieve it from the cache whenever the function is called again.

const cachedFunction = (cachedData => {
  return function(){
    // if there is no data in the cache yet, store a promise in the "cachedData" variable
    if( !cachedData ){
        cachedData = new Promise(function(resolve, reject){
            setTimeout(() => {
                resolve('foo');
            }, 2000);
        });
    }
    return cachedData;
  }
})();

cachedFunction().then(console.log);
cachedFunction().then(console.log);

Explaination:

To implement this, you wrap your function with another immediately-invoked function that returns the original function, ensuring that the local variable cachedData is encapsulated within the wrapper function. This guarantees that the value of the variable remains consistent every time the function is called after the first invocation.

Answer 6

This specific pattern is designed to store in cache the initial result and then retrieve it from the cache whenever the function is called again.

const cachedFunction = (cachedData => {
  return function(){
    // if there is no data in the cache yet, store a promise in the "cachedData" variable
    if( !cachedData ){
        cachedData = new Promise(function(resolve, reject){
            setTimeout(() => {
                resolve('foo');
            }, 2000);
        });
    }
    return cachedData;
  }
})();

cachedFunction().then(console.log);
cachedFunction().then(console.log);

Explaination:

To implement this, you wrap your function with another immediately-invoked function that returns the original function, ensuring that the local variable cachedData is encapsulated within the wrapper function. This guarantees that the value of the variable remains consistent every time the function is called after the first invocation.

Storing a promise object within an AngularJS service

Answer №1

Answer №2

Answer №3

Explaination:

Similar questions

Having trouble accessing the href attribute after clicking on an <a> tag with JavaScript

Traverse an SVG element using JavaScript

Viewing saved information prior to saving - JavaScript

Unable to retrieve or remove cookie sent from Express on client side

What is the process for fetching and storing a binary file video in Flask's Blob?

Having trouble importing components in NativeScript Vue?

Using Selenium Webdriver with Node.js to Crop Images

Creating dynamic "floating divs" with consistent width but varying heights, alignment challenge

Employing various Class Methods based on the chosen target compiler option

Obtain the selected row's ID by leveraging angular.js with either ngSelect or ngOptions

Resetting the internal state in Material UI React Autocomplete: A step-by-step guide

Puppeteer's flawed performance leads to the generation of low-quality

Try to steer clear of using $watch for changes in directive attributes

Challenges with retrieving all text records in a profile using ethers.js

Implementing a class addition on focus event using Angular 2

Encountering a Next.js event type issue within an arrow function

Issue with slideshow counter persisting across multiple arrays

I need to extract information from the database and save all entries from the form in order to send them to myself. This includes calculating the real-time multiplication of weight and pieces

The images in the React slick carousel appear to be slightly out of

Can anyone suggest a way to iterate over an object and substitute spaces in the keys?