CODEWITHSUNDEEP
javascriptangularjsasynchronousqangular-promise
Vahid Najafi
Vahid Najafi

Reputation: 5253

AngularJS $http result with promise

I am new in angular $q service.I'm using $http with angular $q service for implementing asynchronous requests. Here in below is my codes which I can't get the result of backend api. (json)

Services.js :

.service('httpService', function($q, $http, $timeout) {

 var asyncRequest = function(url) {
    return $http.get(url)
        .then(function(response) {
            //res is the index of an array in php, which will be encoded.
            return response.res;

        }, function(response) {
            // something went wrong
            return $q.reject(response.res);
        });
 };
 return {
   asyncRequest : asyncRequest 
 };

});

Controller.js :

var result = httpService.test(url)
.then(function(data) {
    // Line below gives me "undefined"
    console.log(data);
}, function(error) {
    alert("Error...!");
});

The mentioned line, gives me undefined. (Of course, I can write console.log(data) in main function, But it's not a good practice, because I want to return result to controller)

About my implementation of $q service, is there any easier way?

Any idea would be greatly appreciated.

Upvotes: 2

Views: 1741

Answers (5)

Simon H
Simon H

Reputation: 21005

You should not use $q in this instance, as $http already returns a promise. Using to 2 together in inefficient. ($q is of use if you are using a non-angular async function, such as a Geo lookup).

Services.js :

.service('httpService', function($http, $timeout) {

  var asyncRequest = function(url) {
    return $http.get(url)
  };
  return {
   asyncRequest : asyncRequest 
  };

});

Controller.js :

var result = httpService.asyncRequest(url)
.then(function(res) {
    console.log(res.data);
}, function(error) {
    alert("Error...!");
});

Upvotes: 5

Onur Gazioğlu
Onur Gazioğlu

Reputation: 511

The response is already rejected in the mentioned line. You don't need to reject anything else. So you don't need to $q.

First you already return a promise. You can handle it in the controller with adding success() and error() delegates of the $http promise. Second, this is async operation. And you can't return a response from the success callback like jQuery.ajax(). This is not synch call, this is asynch call and you have to use callbacks. Your mistake is here. Just return promise and handle it in controller when the response will has been resolved or rejected.

So your controller code can be like this:

httpService.asyncRequest({
    ...
}).success(function(successfulResponse) {
    ...
}).error(function(failedResponse) {
    ...
});

Upvotes: 0

pethel
pethel

Reputation: 5537

I think you are using the syntax for at factory on your service. 

.service('httpService', function($q, $http, $timeout) {
   this.asyncRequest = function(url) {};
});

or 

.factory('httpService', function($q, $http, $timeout) {
   return {asyncRequest: function(url) {}};
});

Upvotes: 1

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

First thing is that you are using factory style instead of service. service is just a function where methods are defined on this reference .

I think you don't need to use .then in service just return the promise returned by $http

app.service('httpService', function($q, $http, $timeout) {

  this.asyncRequest = function(url) {
    return $http.get(url);
  };
});

And in controller

 var result = httpService.test(url)
  .then(function(res) {
    // Line below gives me "undefined"
    console.log(res.data);
  }, function(error) {
    alert("Error...!");
  });

Upvotes: 1

Bharat Bhushan
Bharat Bhushan

Reputation: 2097

.service('httpService', function($q, $http, $timeout) {

 var asyncRequest = function(url) {
   var defer = $q.defer();
    return $http.get(url)
        .then(function(response) {
            //res is the index of an array in php, which will be encoded.
            defer.resolve(response);

        }, function(response) {
            // something went wrong
            defer.reject(response.res);
        });
     return defer.promise;
 };
 return {
   asyncRequest : asyncRequest 
 };

});

you should return promise from your object like this

Upvotes: -4

Related Questions