異步調用在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)); 
});