为什么在解决服务调用之前渲染模板

Question

我在我的 SPA 中的 ui 路由器中在其他一些状态下使用 Resolve 功能，但由于某种原因，在我的服务器仪表板状态下，它在服务调用完成呈现之前调用模板。这会导致类型错误，因为我尝试使用在解析之前传递的值。

这是我的 StateProvider：

.state('triangular.server-details', {
    url: '/dashboards/Server/{hostName}',
    templateUrl: 'app/examples/dashboards/server/dashboard-server.tmpl.html',
    controller: 'DashboardServerController as serverDetails',
    resolve:{
        ServiceList:['$stateParams','ServerService', function($stateParams, ServerService){
            return ServerService.getServices($stateParams.hostName);
        }],
        HostData:['$stateParams','ServerService', function($stateParams, ServerService){
            return ServerService.getHost($stateParams.hostName);
        }]
    }
})

这里是service.js中的getHost函数：

service.getHost = function(HostName){
    var HostList = [];
    $http.get('http://localhost:9000/Host/' + HostName).then(function(response){
            var Data = response.data.recordset;
            for (i = 0; i <= Data.length -1; i++){          
                HostList.push({
                    "HostName" :Data[i].HostName,
                    "address" :Data[i].Address,
                    "alias":Data[i].Alias,
                    "nagios":Data[i].Nagios,
                    "hoststatus":Data[i].Status,
                    "hoststatuscheck" : Data[i].LastCheck,
                    "hosticon" : Data[i].ShortStatus,
                })
            }
        })
    return HostList;
};

这是我的控制器：

DashboardServerController.$inject = ['ServiceList', 'HostData', '$scope'];
function DashboardServerController(ServiceList, HostData, $scope) {
    var serverDetails = this;
    serverDetails.ServiceList = ServiceList;
    serverDetails.HostData = HostData;
    console.log(serverDetails.HostData);
    console.log(serverDetails.HostData[0].HostName);
}

当我第一次访问该页面时，它会在控制台中打印 HostData，但在尝试打印 HostName 时会出现类型错误。然后，调用 api 来获取服务列表和 Hostdata。如果我刷新页面，我不会收到任何错误。

Answer 1

如果您希望 resolve 等待，您的 getHost 方法需要返回一个 Promise。 重构为这样的：

service.getHost = function(HostName){
var HostList = [];
return $http.get('http://localhost:9000/Host/' + HostName).then(function(response){
        var Data = response.data.recordset;
        for (i = 0; i <= Data.length -1; i++){          
            HostList.push({
                "HostName" :Data[i].HostName,
                "address" :Data[i].Address,
                "alias":Data[i].Alias,
                "nagios":Data[i].Nagios,
                "hoststatus":Data[i].Status,
                "hoststatuscheck" : Data[i].LastCheck,
                "hosticon" : Data[i].ShortStatus,
            })
    return HostList;
        }
    })

};