angularjs http service wait for data

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?

AranS · Accepted Answer · 2016-08-09 09:34:08Z

2

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);
}

edited Aug 9, 2016 at 9:34

answered Aug 9, 2016 at 9:28

AranS

1,91113 silver badges22 bronze badges

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

Comments

Syam Pillai · Accepted Answer · 2016-08-09 09:38:08Z

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
   */ 
  })

answered Aug 9, 2016 at 9:38

Syam Pillai

5,2202 gold badges31 silver badges43 bronze badges

1 Comment

Doug Chamberlain Over a year ago

What is the point of your deferred.resolved(data)? data will already be resolved when the call back fires.

Doug Chamberlain · Accepted Answer · 2016-08-09 09:38:25Z

2

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.
}

answered Aug 9, 2016 at 9:38

Doug Chamberlain

11.4k9 gold badges55 silver badges94 bronze badges

2 Comments

Michael Over a year ago

I try to use it in my example for get and it's dosent work

Doug Chamberlain Over a year ago

Please provide the code for your example with these changes. And explain what "it doesn't work means". What errors are you receiving?

Collectives™ on Stack Overflow

angularjs http service wait for data

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related