Angular http 调用中的 http 调用

Question

我在我的服务中设置了一个函数，用于 return 与特定应用程序相关的 servers/hosts 列表。出于前端目的，我一直在尝试根据主机上有多少服务运行 okay/warning/critical 来为主机分配颜色。为实现这一点，我首先执行 api 调用以获取与该应用程序相关的所有主机，然后循环遍历 returned 主机列表并执行另一个 api 调用以获取服务。

我的问题是它们以正确的顺序解析，所以我的 Data2 变量是 returning "undefined"。我如何让它在第一个 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

可以使用 return statement:

链接 Promise

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

有关详细信息，请参阅

Answer 2

使用 $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
})

Angular http 调用中的 http 调用

Angular http call within an http call

angularjs

angular-services

angular-promise