如何在Angular JS中最小化收集所有promise的延迟

Question

请看下面我的代码。在for循环中，在每次迭代中，我都会进行Ajax调用，将promise推入数组，并用$q.all.解决所有这些promise，但这会导致延迟，因为我需要等到for循环中收集的所有promise然后在所有promise可用之后，我需要一个接一个地解决它们，q.all.美元

var promises = [];

for (var i = 0; i < dashboardslayoutArray.length; i++) {
    dashboardData.dashletteBeansList = [];
    dashboardData.dashletteBeansList[0] = dashboardslayoutArray[i];

    var dashlettePromise = DashboardsDataService.getTabDetails(dashboardData);
    promises.push(dashlettePromise);
}

$q.all(promises)
    .then(function(data) {
        // all promises were resolved here
    });

相反，我想做的是，在“for”循环本身中很快就可以使用promise时解决它，而不将它推到“promises”中，以便在$q all中使用。比如，

for (var i = 0; i < dashboardslayoutArray.length; i++) {
    dashboardData.dashletteBeansList = [];
    dashboardData.dashletteBeansList[0] = dashboardslayoutArray[i];

    var dashlettePromise = DashboardsDataService.getTabDetails(dashboardData);

    dashlettePromise.then(function(data) {
        ...
    }, function(error) {
        alert(error);
    });
}    

但这并没有像预期的那样起作用。这里第二promise结果影响第一promise结果等。这有什么解决办法吗？

根据@Benjamin Gruenbaum的建议，我将其更改为

angular.forEach(dashboardslayoutArray, function(dashboardslayout) {
    dashboardData.dashletteBeansList = [];
    dashboardData.dashletteBeansList[0] = dashboardslayout;

    var promise = DashboardsDataService.getTabDetails(dashboardData);

    promises.push(promise);

});

但即使在这里，我怎样才能减少延误呢？

@本杰明·格伦鲍姆，我将我的问题总结如下：

var promises = [];
angular.forEach(dashboardslayoutArray, function(dashboardslayout) {
    dashboardData.dashletteBeansList = [];
    dashboardData.dashletteBeansList[0] = dashboardslayout;

    var promise = DashboardsDataService.getTabDetails(dashboardData);

    promises.push(promise);

});

$q.all(promises)
    .then(function(allData) {

        allData.forEach(function(data) {

            for (var dashVar = 0; dashVar < data.tabDetails.length; dashVar++) {
                var dashletteId = data.tabDetails[dashVar].dashletteId;
                var axisType = data.tabDetails[dashVar].axisType;
                // ...   draw c3 chart ...
            }
        });
    });

我需要进行多个Ajax调用，所以我使用了上面的方法，效果很好。这里我所有的Ajax调用结果都是独立的，没有一个依赖于其他调用。使用每个Ajax调用返回的数据，我使用Angularjs C3指令绘制了一张图表。

但我面临的问题是拖延。要绘制四个C3图表，我需要使用$q.all进行四个ajax调用，只有在所有四个ajax调用完成（解决或拒绝）后才能开始绘制C3图表。相反，我想做的是，任何一个Ajax调用完成（解决或拒绝）后，我想根据该特定Ajax调用的结果开始绘制C3图表。因此，我使用了以下方法来避免排队等待所有promise的延迟。

angular.forEach(dashboardslayoutArray, function(dashboardslayout) {
    dashboardData.dashletteBeansList = [];
    dashboardData.dashletteBeansList[0] = dashboardslayout;

    var promise = DashboardsDataService.getTabDetails(dashboardData);

    promise.then(function(data) {

        for (var dashVar = 0; dashVar < data.tabDetails.length; dashVar++) {
            var dashletteId = data.tabDetails[dashVar].dashletteId;
            var axisType = data.tabDetails[dashVar].axisType;
            // ...   draw c3 chart ...
        }
    }, function(error) {
        alert(error);
    });

});

我的最后一个问题是，我使用的promise方法正确吗。然后（function（data）insideangular.forEach（dashboardslayoutArray，function（dashboardslayout）以避免延迟？这种方法是否存在任何潜在问题？我希望，我已经清楚地表达了我的问题，如果没有，请让我知道，我将尝试进行删除。

Answer 1

我的最后一个问题是，我使用promise的方式正确吗。然后（函数（数据）在angular.forEach（dashboardslayoutArray）中，函数（dashboardslayout）可以避免延迟吗？

是的，这正是你应该做的。$q.all（）允许你在一整套promise得到解决后做一些事情。因为这与您想要做的相反，所以$q.all（）不是这里工作的合适工具。

在第二个代码示例中，您从未向我们展示过then（）中的内容，但考虑到您所说的“第二个promise结果影响第一个promise结果等”，Benjamin Grunbaum的怀疑很可能是正确的，导致问题的是i循环变量。切换到。forEach（）会解决这个问题。