Avoid multiple $http.get in async service

Question

I've created a service that fetches through $http.get().

My service is used in a directive that renders to several ui elements. The service is async. It's used in the directive code like: myService.getStuff(), and it returns a customized promise (from within the callbacks of the $http.get promise).

But I want my service to only perform one call to $http.get during the lifecycle of the app. And cache the http.get response.

So say I use the directive 2 times in my html. Then this is what I want: The first time it's called it (returns immediately and) fetches stuff via $http.get. The second time it's called it detects an outstanding call to $http.get. thus does not do another call to $http.get, but somehow awaits the return of the first call.

hansmaad · Accepted Answer · 2016-07-05 12:46:08Z

2

You might want to use the internal cache of $http

return $http.get(/*...*/, { cache: true }).then(/*...*/);

or just cache the promise in your service.

function MyService($http) {
   var promise;

   this.get = function() {
      promise = promise || $http.get(/*...*/).then(/*...*/);
      return promise;
   }
}

If you're using uirouter, another way is to resolve the data in a parent state, and inject the resolved data to all your components.

edited Jul 5, 2016 at 12:46

answered Jul 5, 2016 at 12:14

hansmaad

19k9 gold badges59 silver badges97 bronze badges

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

2 Comments

Duncan Over a year ago

You have a spurious extra var inside the function. It needs to just be an assignment to the outer promise variable.

Manolo Over a year ago

so setting cache: true, won't work in my case since what I want to avoid is calling $http.get(), regardless of if it internally caches the response. But as you write caching the promise in my service might be more along the lines. This means that I would return the same promise several times and set different callback functions to it each time the service is called. Is this fine?

Nasreddine · Accepted Answer · 2016-07-05 12:20:15Z

0

Set cache to true like this:

$http.get(yourUrl, {cache: true})
    .then(...)

Any subsequent call to this will use the cached value.

answered Jul 5, 2016 at 12:20

Nasreddine

38.1k17 gold badges79 silver badges95 bronze badges

Collectives™ on Stack Overflow

Avoid multiple $http.get in async service

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related