javascript - 使用顺序 for 循环解析多链 Promise

Question

在下面的代码中，我尝试执行以下操作:

• 让 Stats()、getOverallStats() 和 GetGroups() 并行运行。每个都返回一个 promise 。
• GetGroups.then() 中的 forEach 应按顺序运行，以确保输出的顺序正确。
• 完成上述所有操作后，再运行一些代码。

但是，我对这些 promise 感到非常困惑!日志记录给了我:

looping
here
looping
looping

但我正在寻找的是这里的最后。

最后，目前我已对 loopAgelist[1] 进行了硬编码以进行测试。但是，我实际上希望能够循环 loopAgelist[] 并在其间设置超时!如果有人可以解释一些在这些复杂情况下使用的 promise “规则”，我将不胜感激。

    var loopAgeList;
    var looppromises = [];
    getAgeGroupList().then(function (loopAgeList) {
        var statsPromise = Stats(loopAgeList[1]);
        var oStatsPromise = getOverallStats();
        var grpPromise = GetGroups(loopAgeList[1]).then(function (groups) {
            var promise = Parse.Promise.as();
            groups.forEach(function (grp) {
                promise = promise.then(function () {    // Need this so that the tables are drawn in the correct order (force to be in series)
                    console.log("looping")
                    if (grp != "KO"){
                        var standingsPromise = Standings(loopAgeList[1], grp);
                        looppromises.push(standingsPromise);
                    }

                    var fixPromise = GetFixtures(loopAgeList[1], grp);
                    looppromises.push(fixPromise);
                    return fixPromise;
                });
            });
            return Parse.Promise.all(looppromises);
        });
        var promises = [statsPromise, oStatsPromise, grpPromise, looppromises];
        Parse.Promise.all(promises).then(function(results) {
            console.log("here");
        });
    });

Answer 1

通过采用几个简单的样式规则可以显着改进重写:(1) 不需要创建一个已解决的 promise ，然后链接到它(事实上，大多数人会认为这是一种反模式)，(2) Promise 通过迭代操作数数组来一起运行是数组 .map(而不是reduce)的完美应用，(3)最重要的是，更小的、可测试的、promise 返回的函数总是能解开谜团。

把所有这些放在一起，主要功能可以像这样简单......

function loopOverOnce(agegroup) {
    let statsPromise = Stats(agegroup);
    let oStatsPromise = getOverallStats();
    let grpPromise = GetGroups(agegroup).then(function(groups) {
        return getStandingsAndFixturesForGroups(groups, agegroup);
    });
    return Parse.Promise.all([statsPromise, oStatsPromise, grpPromise]);
}

让我们编写getStandingsAndFixturesForGroups。它唯一的工作就是绘制各个组的 map ，并汇总 promise 在每个...

function getStandingsAndFixturesForGroups(groups, agegroup) {
    let promises = groups.map(function(group) {
        return getStandingsAndFixturesForGroup(group, agegroup);
    });
    return Parse.Promise.all(promises);
}

现在，getStandingsAndFixturesForGroup，一个在单个组上执行异步工作的函数，有条件地用于部分工作......

function getStandingsAndFixturesForGroup(group, agegroup) {
    let promises = (group != "KO")?  [ Standings(agegroup, grp) ] : [];
    promises.push(GetFixtures(agegroup, group));
    return Parse.Promise.all(promises);  // this is your standings promise (conditionally) and fixtures promise
}

完成。我将以与此处显示的相反的顺序测试此代码。

编辑OP还询问如何连续执行多个 promise ，并穿插超时。这是我的建议。

首先，延迟函数的一个稍微简单的版本，这是一个很好的例子，当它正确创建一个新的 promise 时(因为底部没有任何东西可以调用来获取一个)

function delay(interval) {
    return new Promise(function(resolve, reject){
        setTimeout(function() {resolve();}, interval);
    });
};

减少是建立 promise 列表的好方法，包括分散的延迟......

getAgeGroupList().then(function (loopAgeList) {
    loopAgeList.reduce(function(promise, agegroup) {
        return promise.then(function() {
            let promises = [loopOverOnce(agegroup), delay(15000)];
            return Promise.all(promises);
        });
    }, Promise.as());
});

一些注意事项:这会导致像loopOverOnce、超时、loopOverOnce、超时...等序列。如果您想先超时，请反转内部循环中小链的顺序:

[ delay(15000), loopOverOnce(agegroup) ]

最后一点是，通过对匿名函数采用 ES6 粗箭头语法，所有这些都可以变得更短、更漂亮，例如

loopAgeList.reduce((promise, agegroup) => {
    promise.then(() => Promise.all([loopOverOnce(agegroup), delay(15000)]));
}, Promise.as());