Handle simultaneous get calls in angularjs - angularjs

Question

My angular application is divided into 4 modules and all modules require user details so I am calling getUser method from each of the module. So when my application loads all 4 modules hit the getUser API simultaneously resulting in 4 get requests on server. How can I prevent this ? I am using singleton pattern in my getUser method so once my user gets loaded it will simply serve the user from an object. But that does not solves the problem if all modules request for the user simultaneously.
My code looks like this
getUser() {
let defer = this.q.defer();
if (!this.user) {
this.http.get(`${this.config.apiHost}users`)
.success(result => {
this.user = result;
this.rootScope.$broadcast('userFound', this.user);
defer.resolve(this.user);
})
.error(err => defer.reject(err))
}
else {
defer.resolve(this.user);
this.rootScope.$broadcast('userFound', this.user);
}
return defer.promise;
}

Answer 1

By storing the current request in a variable the call to UserService.get will return the same request promise.
Then when the promise resolves, it will resolve to all your modules.
angular.module('app').service('UserService', function ($http) {
var self = this;
var getRequestCache;
/**
* Will get the current logged in user
* #return user
*/
this.get = function () {
if (getRequestCache) {
return getRequestCache;
}
getRequestCache = $http({
url: '/api/user',
method: 'GET',
cache: false
}).then(function (response) {
// clear request cache when request is done so that a new request can be called next time
getRequestCache = undefined;
return response.data;
});
return getRequestCache;
};
});

Answer 2

You are using ui-router for the routing. You can then use this to resolve the user when landing on the page.
In your routing config :
$stateProvider
.state('myPage', {
url: '/myPage',
templateUrl: 'myPage.html',
controller: 'myCtrl',
resolve: {
userDetails: ['UserService', function(UserService) {
return UserService.getUserDetails();
}],
}
})
In your controller
angular.module('myModule')
.controller('myCtrl', ['userDetails', function(userDetails) {
console.log(userDetails);
}];
This will load the user details while loading the page.

Answer 3

I solved this problem by using defer object as a global object so that it only gets initialised once.