在使用http.get()迭代调用URL并使用$ q.all()解析

时间:2016-08-25 19:06:08

标签: javascript angularjs promise angular-controller

我正在实现这种情况,我必须迭代地从多个URL获取数据并使用一些业务逻辑处理它并在屏幕上显示。我在控制器中实现这个,因为它是一个要求。一切都很好,直到第一部分,我在promises数组中得到6个promise对象。但是,我没有将数据导入metricData。我在浏览器中运行时在控制台中看到null。我确信数据会在URL响应中出现。我觉得我在$q.all方法中做了一些愚蠢的事情。这是对的吗?

var calculateMutationsInDepth = function(){
        //Part-1
        var promises=[];
        var metricData=[];
        for(var depth=0 ; depth<6 ; depth++){
                var resourceUrl = urlService(depth);
                promises.push($http.get(resourceUrl)
                                  .then(function(response){
                                    return response.data;
                                    },function(status){
                                        return status;
                                }));
                           }
        //Part-2 Resolving the promise array below              
         $q.all(promises).then(function(data){
                        for(var eachResult=0; eachResult < data.length; eachResult++){
                            if(null != data[eachResult]){
                                var eachDataObject = data[eachResult];
        //For debugging         console.log(eachDataObject);
                                    for(var objCount=0; objCount < eachDataObject.length; objCount++){
                                        if(eachDataObject[objCount].scope === "PRJ" || eachDataObject[objCount].scope === "FIL")
                                            metricData.push(eachDataObject[objCount]);
                                    }
                            }
                        }

     });
        if(metricData != null){
                analyzeMutationData(metricData); //Calling a function with the aggregated data array where business logic is present
            }
};

calculateMutationsInDepth();     //Calling the above function

2 个答案:

答案 0 :(得分:1)

是的,有些傻。

如上所述,analyzeMutationData(metricData)被同步调用,而metricData$q.all(promises).then()回调中异步填充。

另外,正如所写,错误处理程序function(status){ return status; }是不合适的。要么:

  • 完全省略错误处理程序并允许任何单个$http错误阻止在第2部分中进一步处理,或
  • return null,允许第2部分中的处理,以及第2部分中的if(dataObject != null)测试,以过滤掉任何此类错误。

以下是经过修改的代码,其中包含一些其他问题以及如果calculateMutationsInDepth()返回承诺可以执行的操作演示。

var calculateMutationsInDepth = function() {
    //Part-1
    var depth, promises = [];
    for(depth=0; depth<6; depth++) {
        promises.push($http.get(urlService(depth))
        .then(function(response) {
            return response.data;
        }, function(error) {
            return null; // error recovery - `dataObject` below will be null
        }));
    }
    //Part-2 Aggregate the promises, extract metric data and apply business logic
    return $q.all(promises).then(function(data) { // note `return` here
        var dataObject, i, j, metricData = [];
        for(i=0; i<data.length; i++) {
            dataObject = data[i];
            if(dataObject != null) {
                for(j=0; j<dataObject.length; j++) {
                    if(dataObject[j].scope === "PRJ" || dataObject[j].scope === "FIL") {
                        metricData.push(dataObject[j]);
                    }
                }
            }
        }
        // Analyse here, inside the .then()
        if(metricData.length > 0) { // metricData is an array and will never be null, therefore test metricData.length.
            return analyzeMutationData(metricData);
        }
        return null;
    });
};

calculateMutationsInDepth().then(function(analysis) {
    // all complete
    // `analysis` is either null or whatever `analyzeMutationData(metricData)` returned.
}).catch(function(error) {
    console.log(error);
});

答案 1 :(得分:0)

希望this帮助你!如果不是,请告诉我。