http呼叫中的角度http呼叫

Question

我在我的服務中設置了一個函數，以返回與特定應用程序相關的服務器/主機列表。對於前端的目的，我一直試圖給主機分配一個顏色，這取決於主機上有多少服務正在運行okay/warning/critical。爲了實現這一點，我首先進行一次api調用，以獲得與該應用程序相關的所有主機，然後循環訪問返回的主機列表，並執行另一個api調用來獲取服務。

我的問題是，他們正在解決正確的順序，所以我的Data2變量返回「未定義」。如何在第一個for循環中解決它，以便我可以爲每個主機分配一個狀態顏色？

有沒有更好的實現方法？

這是我在我的服務中定義的功能。

// Function to get Servers and all their information ********************************** 
      service.getHosts = function(AppName){ 
       var HostList = []; 

//intial http call to get the correct hostlist associated with the selected application ************ 
       var promise = $http.get('http://localhost:9000/App/' + AppName); 
       promise.then(function(response){ 
         var Data = response.data.recordset; 

//Looping through each host is the recordset to push them into the HostList[] ********************** 
         for (i = 0; i <= Data.length -1; i++){ 
          //variables for the loop  
          var StatusColor = ''; 
          var StatusTextColor = ''; 
          var count = 0; 

//another http call to get the services for each host in the Hostlist ****************************** 
          $http.get('http://localhost:9000/Service/' + Data[i].HostName) 
          .then(function(response){ 
           var Data2 = response.recordset; 
//looping through the services to see if any of the services have status other than ok (shortstatus != 0) ******** 
           for(i = 0; i<= Data2.length-1; i++){ 
            if(Data2[i].ShortStatus != 0){ 
             count = count + 1; 
            } 
           } 

//Assigning the status color for each host depending on how many services are not ok (either warning or critical) ************* 
           if (count == 0){ 
            StatusColor ='rgb(255,152,0)'; 
            StatusTextColor = 'black'; 
           }else if (count == 1){ 
            StatusColor ='rgb(255,152,0)'; 
            StatusTextColor = 'white'; 
           }else{ 
            StatusColor = 'rgb(244,67,54)'; 
            StatusTextColor = 'white'; 
           } 
//Pushing host information and status color to the HostList **********************    
           HostList.push({ 
           "address":Data[i].Address, 
           "hostname":Data[i].HostName.split('.')[0], 
           "fullhostname":Data[i].HostName, 
           "statuscolor":StatusColor, 
    //       "textcolor":'black' 
           })  
          }); 


         } 
        }) 
       return HostList; 
      }; 

任何幫助非常感謝或任何建議更簡單或更優雅的方式將是真棒。

Answer 1

使用$ q.all並承諾鏈接

service.getHosts = function (AppName) { 
    //returns a http promise 
    return $http.get('http://localhost:9000/App/' + AppName) 
     .then(function (response) { 
      var Data = response.data.recordset; 

      //makes an array of $http promises 
      var promises = Data.map(function (dt) { 
       return $http.get('http://localhost:9000/Service/' + dt.HostName) 
      }); 
      //executes all the promises in the array simultaneously and returns a single promise object 
      //whose result(response.data) will be an array of all the responses from the promises in the array 
      return $q.all(promises); 
     }) 
}; 
//Call the service method 

service.getHosts("app_name_here") 
.then(function(response){ 
    //response.data will have an array of responses for all the inner $http.get calls 
    //you wont still be able to return the data because everything is asynchronous 
    //Populate your data in the $scope here after data massaging 
}) 

Answer 2

承諾可以通過使用return statement被鏈接：

$http.get(url).then(function(response) { 
    return $http.get(url2); 
}).then(function(response2) { 
    return $http.get(url3); 
}).then(function(response3) { 
    //... 
}); 

欲瞭解更多信息，請參閱

• AngularJS $q Service API Reference - Chaining Promises
• You're Missing the Point of Promises