How to return AngularJS Function's $http response?

Question

I am working on some AngularJS examples. When I click a href link getTestUserName() is triggered and it is return undefined. I just want to see response data from $http. Purpose of this code block that I wrote is avoiding code repeating.

DashboardController.js

ajs.controller("DashboardController", function($scope, $http, $localStorage, $window){
  var token_header = "Token " + $scope.token;
  $scope.getTestUserName = function (target_url) {
    $http({
      url: target_url,
      method: "GET",
      async: false,
      crossDomain: true,
      processData: false,
      contentType: false,
      headers: {
        "Authorization": token_header
      }
    }).success(function onSuccess(response, status) {          
        return response;
    }).catch(function onError(response) {
      //to do
    });
  };  

  $scope.loadTest=function () {
    console.log($scope.getTestUserName("http://0.0.0.0:8001/user/users/1/"));
  };

});

app.js

var ajs = angular.module('my-app', ['ngRoute','ngStorage']);

dashboard.html

<a href="javascript:void(0);" ng-click="loadTest()">Test Click</a>

If I write the $timeout function in loadTest() function, it's working. But I think it's not a good solution to handle it. So, How do I get response from getTestUserName() function.

(1) return $http(... (2) getTestUserName(url).then((res)=>{console.log(res);}) — Aleksey Solovey
– Aleksey Solovey, Commented Dec 11, 2017 at 11:43

federico scamuzzi · Accepted Answer · 2017-12-11 11:49:04Z

3

you can archive your goal in two ways ... or RETURN the $http call from your getTestUserName() method like so:

 $scope.getTestUserName = function (target_url) {
   return $http({
      url: target_url,
      method: "GET",
      async: false,
      crossDomain: true,
      processData: false,
      contentType: false,
      headers: {
        "Authorization": token_header
      }
    });
  };

OR PILOT 'MANUALLY' by yourself the promise ..with $q like:

 $scope.getTestUserName = function (target_url) {
var deferred= $q.defer(); //<--declare it and initilize

    $http({
      url: target_url,
      method: "GET",
      async: false,
      crossDomain: true,
      processData: false,
      contentType: false,
      headers: {
        "Authorization": token_header
      }
    }).success(function (response) {          
        deferred.resolve(response); //MARK AS REVOLVED OK
    }).catch(function (err) {
      deferred.reject(rerr); //MARK AS REVOLVED WITH ERROR
    });

return deferred.promise; //<--here you return it
  };

and so you can call it as :

$scope.loadTest=function () {


$scope.getTestUserName("http://0.0.0.0:8001/user/users/1/").then(function(resp){ 
console.log(resp);
}).catch(function(err){ 
console.log(err);
}));
  };

Hope it helps you!..

answered Dec 11, 2017 at 11:49

federico scamuzzi

3,7781 gold badge19 silver badges26 bronze badges

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

2 Comments

user518851726681 Over a year ago

That is what I wanted to do. Thank you very much sir. @federico

Aleksey Solovey Over a year ago

@bullception $http returns a Promise, just like $q, so using both is an anti-pattern

James Frankline · Accepted Answer · 2017-12-11 11:49:29Z

0

Create a Service

function find ()
  {

    var deferred = $q.defer();

    $http.get('url')
      .success(function(data){
        deferred.resolve(data);
      })
      .error(function(error){
        deferred.reject(error.message);
      });

      return deferred.promise;

  }

answered Dec 11, 2017 at 11:49

James Frankline

1

Collectives™ on Stack Overflow

How to return AngularJS Function's $http response?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related