I have a problem using angular in a Ionic mobile project , I have this piece of code working great in my desktop environment. I do three API call to a web server 500ms after each other. But in the phone using a lower connection sometimes one of the call fails so the whole process fail. Is there some way to do the API calls in the exact moment that the previous one finish? I mean, not using fixed amount of time.
//get member information
$timeout(function() {
membersService.getMember(community.url, community.user.api_key, community.user.auth_token, $stateParams.userId).
success(function(data) {
$scope.member = data.result;
});
}, 500);
$timeout(function() {
messagesService.getConversation(community.url, community.user.api_key, community.user.auth_token, community.user.user_info.guid, $stateParams.userId, "from").
success(function(data) {
if(data.result["entities"].length > 0) {
messages = messages.concat(data.result["entities"]);
subject = "Re: "+data.result["entities"][data.result["entities"].length-1].title;
}
$scope.messageData.subject = subject;
});
}, 1000);
$timeout(function() {
messagesService.getConversation(community.url, community.user.api_key, community.user.auth_token, community.user.user_info.guid, $stateParams.userId, "to").
success(function(data) {
log = [];
if(data.result["entities"].length > 0) {
angular.forEach(data.result["entities"], function(v, k) {
v.owner_guid = $stateParams.userId;
log.push(v);
}, log);
messages = messages.concat(log);
}
var log = [];
var count = 0;
angular.forEach(messages, function(v, k) {
messages_reorder.push(v);
}, log);
});
}, 1500);
You can use angular $q service for that.
You should look at the Angular Promise API. it is meant for the same purpose. It allows you to chain ajax calls one after another..
// this
$http.get('/api/v1/movies/avengers')
.success(function(data, status, headers, config) {
$scope.movieContent = data;
});
// is the same as
var promise = $http.get('/api/v1/movies/avengers');
promise.then(
function(payload) {
$scope.movieContent = payload.data;
});
More Details here
This was the result of implementing nesting promise chains:
var loadMemberInfo = function( userId )
{
return membersService
.getMember(community.url, community.user.api_key, community.user.auth_token, $stateParams.userId)
.then(function(data)
{
$scope.member = data.result;
});
},
getConversationFrom = function() {
return messagesService
.getConversation(community.url, community.user.api_key, community.user.auth_token, community.user.user_info.guid, $stateParams.userId, "from")
.then(function(cf) {
if(cf.data.result["entities"].length > 0) {
messages = messages.concat(cf.data.result["entities"]);
subject = "Re: "+cf.data.result["entities"][cf.data.result["entities"].length-1].title;
}
$scope.messageData.subject = subject;
});
},
getConversationTo = function() {
messagesService
.getConversation(community.url, community.user.api_key, community.user.auth_token, community.user.user_info.guid, $stateParams.userId, "to")
.then(function(ct) {
log = [];
if(ct.data.result["entities"].length > 0) {
angular.forEach(ct.data.result["entities"], function(v, k) {
v.owner_guid = $stateParams.userId;
log.push(v);
}, log);
messages = messages.concat(log);
}
//order array
messages = messages.sort(function(a,b) { return a.time_created - b.time_created } );
var log = [];
var count = 0;
angular.forEach(messages, function(v, k) {
messages_reorder.push(v);
}, log);
});
},
orderFullConversation = function() {
$ionicLoading.hide();
console.log(messages);
if(messages_reorder.length > 5) {
var messages_partial = messages_reorder.slice(messages_reorder.length-5,messages_reorder.length);
}
else {
var messages_partial = messages_reorder;
}
$scope.messages = messages_partial;
$scope.community = community;
};
loadMemberInfo( $stateParams.userId )
.then( getConversationFrom )
.then( getConversationTo )
.then( orderFullConversation );
More details here