How do I create a angular js service that makes a http request only once

Question

I have the following angularjs service

var assetLookUpTransformService = function($http, $q) {
this.data = null;
var self = this;

this.doStuff = function() {

    var defer = $q.defer();

    if (self.data) {
        defer.resolve(self.data[0].DisplayName);
    } else {
        $http({
            url: '../AssetLookup/GetAssetLookUp',
            method: "GET"
        }).success(function(response) {
            self.data = response;
            defer.resolve(self.data[0].DisplayName);
        });
    }
        return defer.promise;
    }
}

It works ok, in that once the $http request has returned all subsequent calls to "doStuff" return data from data rather than make a new request.

Then problem I have is that I am making a bunch of calls right after each other on page load. And what is happening is that the first call to doStuff will make an $http request, but also any calls to dostuff that happen before the first http request returns will also make a $http request.

Is there a way to make the calls to doStuff "wait" for the outstanding $http request to return before making there own.

Or is there a way to ensure the $http request only ever happens once?

HankScorpio · Accepted Answer · 2015-11-03 00:46:31Z

3

Cache the promise, not the data. The data is encapsulated in the promise and will always be returned to whatever requests it.

var assetLookUpTransformService = function($http, $q) {
var self = this;

    this.doStuff = function() {
        if (!self.deferred) {
            self.deferred = $q.defer();

            $http({
                url: '../AssetLookup/GetAssetLookUp',
                method: "GET"
            }).success(function(response) {
                self.deferred.resolve(response[0].DisplayName);
            });
        }
        return self.deferred.promise;
    }
}

edited Nov 3, 2015 at 0:46

answered Nov 3, 2015 at 0:32

HankScorpio

3,65117 silver badges28 bronze badges

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

Comments

rocketegg · Accepted Answer · 2015-11-03 00:33:56Z

Why don't you just make each of those calls after the first call to doStuff?

Example:

this.doStuff = function(afterRequests) {
   var defer = $q.defer();

if (self.data) {
    defer.resolve(self.data[0].DisplayName);
} else {
    $http({
        url: '../AssetLookup/GetAssetLookUp',
        method: "GET"
    }).success(function(response) {
        self.data = response;
        defer.resolve(self.data[0].DisplayName);
        //make each request in here.
        afterRequests.forEach(function(request) {
           $http(request).success(function(response) { 
           //use self.data here
           });
        });
    });
}
    return defer.promise;
}

If for some reason you have to make doStuff at the same time (e.g. it's very long running), then you could use $rootScope.$broadcast to target your controllers which may need to render the data.

Collectives™ on Stack Overflow

How do I create a angular js service that makes a http request only once

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related