异步调用在AngularJS 1.X中如何工作？ $ Http调用不返回值

Question

我有以下功能getvalue。它与控制器一起位于AngularJS模块内部。我想请点击事件在控制器中调用另一个函数此功能（我希望我清楚）

功能：

function getvalue(Data, $http) { 
      var value=undefined; 
      $http({ 
       url: /myurl, 
       method: "GET", 
       params: { 
        tmp: Data.tmp, 
        pressure: Data.pressure    
       } 
      }).success(function (data, status, headers, config) {    
       value=parseFloat( console.log(data));//console working here 
       return value; 
      }); 
     return value; 
     } 

代码里面控制器

value= getvalue(formData, $http); 
     alert(value);//undefined here. Seems like value is never changed. 

我没有获得警报值，但控制台正在打印此值。如有可能，我需要帮助解决两个问题。

1. 我该如何更改成功内的值并返回控制器？
2. 有没有，我没有注入的$ HTTP从控制器的功能什么办法？ -----如果我可以做单元测试，那会很好。

Answer 1

，你会非常想拉$ http服务了控制器，使一家工厂做的那些电话。

在工厂

具有不接受你想要发送和有它返回的承诺回控制器

像这样

回购

app.factory("fooRepo", ["$http", function($http){ 
    return { 
     getValue: function(data){ 
      return $http({ 
       method: "POST", 
       url: "/myUrl" 
      }); 
     } 
    }; 
}]); 

Serivce

数据的功能

app.factory("foo", ["$q", "fooRepo", function($q, fooRepo){ 
    return { 
     getValue: function(data){ 
      var deferred = $q.defer(); 

      fooRepo.getValue(data) 
      .success(function(results){ 
       //do some work 
       deferred.resolve(results); 
      }) 
      .error(function(error){ 
       // do some work 
       deferred.reject(error); 
      }); 

      return deferred.promise; 
     } 
    } 
}]); 

这里是控制器

app.controller("fooCtrl", ["foo", function(foo){ 
    foo.getValue(dataHere) 
     .then(function(results){ 
      // do something here 
     }); 
}]); 

Added Plunkr

Answer 2

当您调用一个正在进行异步调用的方法时，您必须从那里返回承诺，因为您不知道数据何时会从ajax返回。在该Ajax的成功，你应该更新你的变量。除了ajax函数之外，您将获得未定义的值，因为值以异步方式返回。

功能

function getvalue(Data) { 
     var value=undefined; 
     return $http({ 
      url: /myurl, 
      method: "GET", 
      params: { 
       tmp: Data.tmp, 
       pressure: Data.pressure    
      } 
     }) 
} 

控制器

getvalue(formData).success(function (data, status, headers, config) {    
     console.log(data);//you will get data here 
}); 

Answer 3

一个$ http请求是异步。这意味着警报将在执行.success（..）回调之前被调用。

您可以在控制台上看到结果，因为它反映了在调用console.log（）之后所做的更改。

调用alert（value）;在.success（）中 - 回调将屏蔽期望的结果。

Answer 4

替换：

}).success(function (data, status, headers, config) {    
    value=parseFloat( console.log(data));//console working here 
    return value; 
}); 

有：

}).success(function (data, status, headers, config) {    
    alert(parseFloat(data)); 
});