如何从angularjs中的工厂内的$ http.get()返回数据

时间:2013-08-07 11:11:50

标签: javascript angularjs

我遇到了很多麻烦,我似乎无法在SO或Google上找到任何可以帮助我发现我做错的事情

<!DOCTYPE html>
<html data-ng-app="testApp">
   <head>
      <title></title>
   </head>
   <body>
      <div data-ng-controller="myController">
         {{test}}<br/>
         {{test2}}<br/>
         {{test3}}
         <ul>
            <li data-ng-repeat="member in members">{{ member.firstname}}</li>
         </ul>
      </div>
      <script type="text/javascript" src="angular.min.js"></script>
      <script type="text/javascript">
         angular.module('testApp', ['memberFactory']);

         angular.module('testApp',[])
         .factory('memberFactory', function($http){

            var obj = {};
            obj.data = "abcd";
            obj.getResponse = function(){
                var temp = {};
                $http.get('hello.php').success(function(data){
                        alert(data);
                        temp =data;

                });

                return "some return value";
            }

            return obj
         });

         function myController($scope, memberFactory){ 
            $scope.test= "testString";
            $scope.test2= memberFactory.data;
            $scope.test3= memberFactory.getResponse();

         }
      </script>
   </body>
</html>

return "some return value";有效但当我尝试返回temp时,它为null。我已经尝试了各种方法来实现这一点,但我似乎无法在$http.get()函数中设置临时值

这可能是一件简单的事情(或者说是一个愚蠢的错误/误导的方法)。任何建议将不胜感激

3 个答案:

答案 0 :(得分:24)

使用延期:

obj.getResponse = function(){                 
    var temp = {};
    var defer = $q.defer();
    $http.get('hello.php').success(function(data){
            alert(data);
            temp =data;
            defer.resolve(data);

    });
    return defer.promise;
}

答案 1 :(得分:14)

这里发生的是$ http.get的异步性质的结果,当你运行$ http.get时它不会按顺序运行。也就是说,它“分支”并与其余代码一起运行。这样做是为了适应服务器延迟。

这是一个糟糕的可视化。

.getResponse Called                Return Temp.
|-------------------|--------------|
                    |---------------------------------|
                    $http.get ~Waiting for Server~    Temp assigned to data.

你能看到Temp在给出值之前是如何返回的吗?

值得庆幸的是,您可以使用Angular调用promise的内容,这是一个可以从函数返回的变量,稍后会被“解析”。你实例化这样的承诺。

var myPromise = $q.defer();

您可以使用

为其指定值
myPromise.resolve(data);

然后您可以在函数中以正常方式返回此承诺。即

return myPromise.promise

当然,对于所有这些,您需要$ q库,它包含在函数参数中。

答案 2 :(得分:0)

//in  $httpProvider.interceptors    
if (typeof response.data === 'string') {
   return response;
}
else {
  return response.data;
}