Avoid multiple ajax requests angularJS

Question

I am trying to avoid multiple ajax requests to the server in a factory. I already added a small caching service, but it is not enough for what I aim: this factory can be called several times before the server responds, causing the generation of multiple requests to the server.

To avoid this I added a second promise object, which if the AJAX request have been performed and the object is not yet in cache, than it should wait for a second promise to be resolved, but looks like I am missing something.

This is my code:

myApp.factory('User', ['Restangular', '$q',
  function (Restangular, $q) {
    var userCache, alreadyRun = false;
    return {
      getUser: function () {
        var deferred = $q.defer(), firstRun= $q.defer();

        if (!userCache && !alreadyRun) {
          alreadyRun = true;

          Restangular.all('user').getList().then(function (user) {
            console.log('getting user live ');
            userCache = user[0].email;
            firstRun.resolve(user[0].email);
          });
        } else if (!userCache && alreadyRun) {
          console.log('waiting for the first promise to be resolved ');
          firstRun.then(function(user) {
            console.log('resolving the promise');
            deferred.resolve(userCache);
          });

        } else {
          console.log('resolving the promise from the cache');
          deferred.resolve(userCache)
        }
        return deferred.promise;
      }
    };
  }
]);

I added my final implementation in the answers.

Mimo
– Mimo

2014-03-12 23:48:21 +00:00
Commented Mar 12, 2014 at 23:48 — Mimo
– Mimo, Commented Mar 12, 2014 at 23:48

smilly92 · Accepted Answer · 2014-03-09 07:57:20Z

6

You could just return the original promise if the request has already been made. Something like this should work;

myApp.factory('User', ['Restangular', '$q',
  function (Restangular, $q) {
    var deferred = false;

    return {
      getUser: function () {

        if(deferred) {
          return deferred.promise;
        }

        deferred = $q.defer();

        Restangular.all('user').getList().then(function (user) {
          deferred.resolve(user[0].email);
        });

        return deferred.promise;
      }
    };
  }
]);

Also have a look at the Restangular documentation for caching requests

answered Mar 9, 2014 at 7:57

smilly92

2,4532 gold badges24 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mimo Over a year ago

Thanks for sharing @smilledge . In the meanwhile from when I asked the question I implemented something by myself. However your solution looks really clean and compact so I accepted your answer. Have a look at mine and let me know what you think of it :)

Jonathan Rowny · Accepted Answer · 2014-01-14 23:02:42Z

0

Everytime you run getUser, a new defer is created for firstRun. If it's already ran, you call firstRun.then, but that promise is never resolved.

answered Jan 14, 2014 at 23:02

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

3 Comments

Mimo Over a year ago

But there is any way to achieve what am I trying to do?

Jonathan Rowny Over a year ago

Can't tell you without more context. GetUser is being called from a bunch of places at once? You can use Resolve on a route to make sure it's loaded before you start doing things.

Mimo Over a year ago

Hi @JonathanRowny I added an answer with my own implementation, have a look and let me know what you think. I accepted as answer the one by smilledge because it looks really clean.

Mimo · Accepted Answer · 2014-03-12 23:46:54Z

Thanks all for the answers, in the meanwhile I found a way to cache that particular factory:

.factory('User', ['Restangular', '$q',
  function (Restangular, $q) {
    var userCache, promises = [];
    return {

      getUser: function () {

        var deferred = $q.defer();

        if (promises.length > 0) {

          promises.push(deferred);

        } else if (!userCache) {

          promises.push(deferred);

          Restangular.all('user').getList().then(function (user) {
            var i;
            userCache = user[0];
            for (i = promises.length; i--;) {
              promises.shift().resolve(userCache);
            }
          });

        } else {

          deferred.resolve(userCache);

        }

        return deferred.promise;

      }
    };
  }
]);

Basically the idea is to create an array of promises while userCache is not ready, then resolve the whole queue once the request is ready and finally directly resolve the promise with the cached value for each future request.

I described the implementation of this promise caching here.

Collectives™ on Stack Overflow

Avoid multiple ajax requests angularJS

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related