Best way to compare two API calls in angularJS? - angularjs

Question

I have an AngularJS frontend to my API-based application. There are services which make API calls, such as the following. I want to compare a variable from each of these calls:
Get the user data:
this.getUserData = function () {
var apiCall = $http({
method: 'GET',
url: 'http://example.com/api/userdata',
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token'),
'Access-Control-Allow-Origin': 'Any'
}
});
return apiCall;
};
Get the page data:
this.getPageData = function(slug){
var apiCall = $http.get('http://example.com/api/public/page?slug=' + slug, {
headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
}
)
return apiCall;
};
In my controller I wish to compare a var from each of these calls, like so :
if (apiService.getUserData.likes.page_id == apiService.getPageData.page_id){ // do stuff }
What is the most efficient way of doing this, given that API calls can take a while.. I don't have to make an API call everytime I want to access a variable from the API do I? Bear in mind that these API calls would normally be made in DIFFERENT controllers, so the results are stored in different scopes.
Basically, I'm confused whether that bit of logic should go in a controller, in the service itself, or somewhere else. Any advice is appreciated. Thanks.

Answer 1

If you are comparing them in a controller you can easily call one followed by the other and compare. Since you say you have an "API-based application" and use an auth token from localStorage you should call the API in each different controller you have in case your auth token expires or something.
I would most likely create a service like (flushing it out to more to show all pieces):
angular.module('app').service('CompareService', CompareService);
CompareService.$inject = ['apiService', '$q'];
function CompareService(apiService, $q) {
return {
arePageIdsEqual: apie
};
function apie() {
var deferred = $q.defer();
apiService.getUserData().$promise.then(function(userData) {
apiService.getPageData().$promise.then(function(pageData) {
deferred.resolve(userData.likes.page_id === pageData.page_id);
}, function(err) {
deferred.reject(err);
});
}, function(err) {
deferred.reject(err);
});
return deferred.promise;
}
}
And in your controller just inject it and call it like:
CompareService.arePageIdsEqual(function(yes) {
if(yes) {
// do something
}
}, function(err) {
// err making the calls
});

Answer 2

You should implement it with a Promise.all.
function doCompare(userData,pageData){
if (userData.likes.page_id == pageData.page_id){
// do stuff
}
}
var promises = [apiService.getUserData,apiService.getPageData]
$q.all(promises).then(doCompare);