angularjs http service wait for data - angularjs

Question

I have HTTP service that returns promise to inspection2update.DamageTypeId property and continue to execute further.
HTTP service:
function post(objectTypeId, damageDescription) {
var defer = $q.defer();
$http.post(serviceAddress + "save/" + objectTypeId + "/" + damageDescription).then(function (response) {
defer.resolve(response.data);
});
return defer.promise;
}
Here how I call service in controller:
inspection2update.DamageTypeId = damageTypesService.save(inspection2update.ObjectTypeId, self.dType);
But I need to wait until I get data from service and only after it, to execute further.
For this purpose I use $q service inside $http resolver, but still I get promise from my service and no data.
What do I have to change in my code to make service wait for data?

Answer 1

You are returning a promise which is resolved after the http call has finished fetching the data. The consumer who use this service needs to wait for the promise to resolve and then do something with the data.
Use the then syntax to receive the promise data and execute further:
damageTypesService.save(inspection2update.ObjectTypeId, self.dType).then(function(data) {
inspection2update.DamageTypeId = data;
// rest of execution...
});
P.S - as far as I can see there is no use of $q in your case (unless you want to mingle with the data / make logs, etc...). You can return the $http call as is:
function save(objectTypeId, damageDescription) {
return $http.post(serviceAddress + "save/" + objectTypeId + "/" + damageDescription);
}

Answer 2

Use the best of angular promise with $q
function save (objectTypeId, damageDescription) {
var deferred = $q.defer();
$http({
url: serviceAddress + "save/" + objectTypeId + "/" ,
method: 'POST',
data: damageDescription
})
.success(function (data) {
deferred.resolve(data);
})
.error(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}
And in your controller use .then function
damageTypesService.save(inspection2update.ObjectTypeId, self.dType).then(function(response){
/*use the response here
eg: inspection2update.DamageTypeId = response.id
*/
})

Answer 3

First off, you have your service method named post and your are calling a method called save. Is that an mistake? Second, I don't see any reason you should be using the $http service it is low level and your request is simple. You should checkout $resource it provides a higher level of abstraction and will work for straightforward requests like yours. Now, onto your problem. both $http and $resource always return a promise. so, typically in your service or controller you provide a callback that takes the response received from the request and processes it. Since the approach for $resource and $http are similar, but you asked about $http I will show you using $http.
function post(objectTypeId, damageDescription) {
return $http.post(serviceAddress + "save/" + objectTypeId + "/" + damageDescription);
}
Now, in your controller you call the service method post() like this.
damageTypesService.post(inspection2update.ObjectTypeId, self.dType).then(mycallback);
function myCallback(response){
inspection2update.DamageTypeId = response; // DamageTypeId now won't be populated until the request is resolved.
}