Angularjs $http.get 在循环内答案

【问题标题】：Angularjs $http.get within loopAngularjs $http.get 在循环内
【发布时间】：2017-08-16 17:50:29
【问题描述】：

我将 angular.js 与 C# Web 服务一起使用，我需要逐项递增 ng-repeat 以在数据更新时向用户显示，为此我尝试在其中使用 $http.get循环刷新每个项目中的数据。但它不起作用

for (var i = 0; i < conditions.length; i++) {
        var configFullAsset = {
            params: {
                Field: Field,
                SAM_ConnectionString: SAM_ConnectionString,
                TreeElemId: conditions[i][0],
                ConditionDate: conditions[i][1]
            }
        };
        $http.get('application.asmx/getExtFullAssetHealth', configFullAsset)
            .success(function (responseExt) {
                console.log("Element: ", i);
                if (i == 0) 
                {
                    $scope.showData = responseExt;

                    $scope.fullAssetTable_loading = false;
                    $scope.fullAssetTable_loaded = true;
                }
                else
                    $scope.showData = $scope.showData.concat(responseExt);

                //console.log("Data item: ", $scope.showData[i].Tag);

                $scope.fullData = $scope.showData;
                $scope.filterData(customFilter);
            })
            .catch(function (err) {
                console.log("Error get object: ", err);
            })
            .finally(function () {
                // Hide loading spinner whether our call succeeded or failed.
                //$scope.loading = false;


                $scope.fullData = $scope.showData;
                $scope.filterData(customFilter);
                $scope.fullAssetTable_loading = false;
                $scope.fullAssetTable_loaded = true;

                console.log($scope.fullData);
            });
    }

【问题讨论】：

你能指定什么不工作，任何错误信息，预期的结果是什么？帮助您获得这些信息更容易。

标签： javascript angularjs get

【解决方案1】：

您的代码的主要问题是闲置：您在成功方法中使用 i 作为索引，但这不是您所期望的，因为循环结束，直到您的第一次成功将被调用。

你可以在第一阶段这样构建请求，更容易阅读：

function buildRequests() {
    return conditions.map(function(condition) {
        var configFullAsset = {
            params: {
                Field: Field,
                SAM_ConnectionString: SAM_ConnectionString,
                TreeElemId: condition[0],
                ConditionDate: condition[1]
            }
        };

        return $http.get('application.asmx/getExtFullAssetHealth', configFullAsset);
    });
}

你可以像这样处理所有请求：

function handleRequests() {
    var requests = buildRequests();
    $q.all(requests)
        .then(handleRequests)
        .catch(function(error) {
            console.log(error);
        })
        .finally(function() {
            $scope.fullData = $scope.showData;
            $scope.filterData(customFilter);
            $scope.fullAssetTable_loading = false;
            $scope.fullAssetTable_loaded = true;
        });
}

而不是遍历每个结果以进行更改：

function handleResults(results) {
    results.forEach(function(response, i) {
        console.log("Element: ", i);
        if (i == 0) 
        {
            $scope.showData = response;

            $scope.fullAssetTable_loading = false;
            $scope.fullAssetTable_loaded = true;
        }
        else
            $scope.showData = $scope.showData.concat(response);

        //console.log("Data item: ", $scope.showData[i].Tag);

        $scope.fullData = $scope.showData;
        $scope.filterData(customFilter);
    });
}

不要忘记注入 $q 作为依赖注入。

【讨论】：