javascript - Nester在循环中延迟了Ajax调用

Question

我有一个复杂的（至少对我来说）嵌套循环，ajax调用和deferreds的设置。该代码正在调用API，解析出相关数据，然后使用它进一步调用其他API。

它几乎按预期工作。我使用此问题的答案（Using $.Deferred() with nested ajax calls in a loop）进行构建。这是我的代码：

function a() {
var def = $.Deferred();
var req = [];

for (var i = 0 /*...*/) {
    for (var j = 0 /*...*/) {
        (function(i, j) {
            req.push($.ajax({
                //params
            }).done(function(resp) {
                var def2 = $.Deferred();
                var req2 = [];

                for (var k = 0 /*...*/) {
                    for (var l = 0 /*...*/) {
                        req2.push(b(l));
                    }
                }

                $.when.apply($, req2).done(function() {
                    console.log("Got all data pieces");
                    def2.resolve();
                })
            }));
        })(i, j);
    }
}

$.when.apply($, req).done(function() {
    console.log("Got all data");
    def.resolve();
});

return def.promise();

}

function b(j) {
var def = $.Deferred();

$.when.apply(
    $.ajax({
        //params
    })
).then(function() {
    console.log("Got data piece #" + l);
    def.resolve();
});

return def.promise();

}

function main() {
//...

$.when.apply($, a()).then(function() {
    console.log("All done");
    displayPage();
})

//...

}

这是我期望在通话结束后看到的内容

(In no specific order)
Got data piece #1
Got data piece #0
Got data piece #2
Got all data pieces
Got data piece #2
Got data piece #1
Got data piece #0
Got all data pieces
Got data piece #0
Got data piece #1
Got data piece #2
Got all data pieces
Got all data            <-- These two must be last, and in this order
All done

这就是我所看到的

All done
Got data piece #0
Got data piece #1
Got data piece #2
Got all data pieces
Got data piece #0
Got data piece #1
Got data piece #2
Got all data pieces
Got data piece #0
Got data piece #1
Got data piece #2
Got all data pieces

我在调试器中逐步进行了调试，然后在其他所有操作完成之后，以正确的顺序打印了函数a（）中的“获取所有数据”行，然后将调用def.resolve（）并解析返回的promise。

但是，在main（）中，a（）被视为立即已解决，并且代码直接跳至打印“所有完成”并显示页面。关于为什么它不按预期那样等待的任何想法？

Answer 1

您已经说明了一组代码，并说它没有达到您的期望，但是您并未真正描述整个问题。因此，我实际上并不确切知道要推荐什么代码。在这里，我们在处理实际问题而不是伪代码问题方面做得更好。因此，相反，我能做的是概述一堆您的代码有问题的事情：

期望并行异步操作的串行顺序

根据您的期望，似乎缺少用于控制异步操作​​的基本逻辑。在已启动的一系列Promise上使用$.when()时，您正在并行运行一大堆异步操作。他们的完成顺序是完全不可预测的。

是的，您似乎希望能够并行运行一大堆b(i)并按顺序完成它们。之所以如此，是因为您说您期望这种类型的输出：

得到了数据＃0
得到了数据＃1
得到了数据＃2

其中的每个语句都是通过完成某些b(i)操作生成的。

根本就不会发生这种情况（或者，如果在现实世界中这样做的话，那将是盲目运气，因为没有代码可以保证顺序）。现在，您可以并行运行它们，并使用$.when()跟踪它们，并且$.when()会在完成时通知您，并按顺序收集所有结果。但是当该组中的每个异步操作完成时，都由机会决定。

因此，如果您确实希望每个b(i)操作都能按顺序运行和完成，则必须特意对它们进行排序（运行一个，等待其完成，然后运行下一个，依此类推）。通常，如果一个操作不依赖于另一个操作，则最好并行运行它们，并让$.when()跟踪它们并为您排序结果（因为通常通过并行运行它们可以更快地得到最终结果）而不是对它们进行排序）。

在很多地方创建不必要的延期-Promse反模式

在此代码中，根本不需要创建延迟的。 $.ajax()已经返回了一个承诺。您可以使用该承诺。因此，代替此：

function b(j) {
    var def = $.Deferred();

    $.when.apply(
        $.ajax({
            //params
        })
    ).then(function() {
        console.log("Got data piece #" + l);
        def.resolve();
    });
    return def.promise();
}

你可以这样做：

function b(j) {
    return $.ajax({
        //params
    }).then(function(data) {
        console.log("Got data piece #" + l);
        return data;
    });
}

请注意，您只需要直接返回$.ajax()已经产生的promise，就根本不需要创建任何延迟的请求。这对于错误处理也更加有效。您的方法被称为反模式的原因之一是您根本不处理错误（使用此反模式时常见的错误）。但是，经过改进的代码将错误像应有的那样立即传播回调用方。在您的版本中，如果$.ajax()调用拒绝其诺言（由于错误），则永远不会解决您的延期，并且调用方也永远不会看到该错误。现在，您可以编写额外的代码来处理该错误，但是没有理由。只需返回您已经拥有的承诺即可。当使用返回诺言的异步操作进行编码时，几乎应该永远不需要创建自己的延迟。

仅当您有多个承诺时才需要$.when()

在您的b()函数中，在这段代码中无需使用$.when()：

$.when(
    $.ajax({
        //params
    })).then(...);

当您有一个承诺时，只需直接在其上使用.then()即可。

    $.ajax({
        //params
    }).then(...);

仅当您有多个承诺并且想知道所有承诺完成时才使用$.when()。如果只有一个诺言，请使用其自己的.then()处理程序。

更多反模式-仅返回.then()处理程序的承诺

在您的内部循环中，您有以下内容：

            $.when.apply($, req2).done(function() {
                console.log("Got all data pieces");
                def2.resolve();
            })

这里有几处错误。目前尚不清楚您要做什么，因为def2被推迟使用，没有其他用途。因此，看来您要告诉某人何时完成此req2组承诺，但没有人在使用它。此外，它是反模式的另一个版本。 $.when()已经返回了一个承诺。当$.when()完成时，您无需创建延迟来解决。您可以只使用$.when()已经返回的承诺。

尽管我并不完全了解您的意图，但看来您可能应该做的是完全摆脱延迟的def2并执行以下操作：

            return $.when.apply($, req2).done(function() {
                console.log("Got all data pieces");
            });

从.then()处理程序中返回该承诺，它将把该动作序列链接到父承诺，并使父承诺等待这个新的承诺得到解决（与所有req2承诺完成时联系在一起） ）之前，父母的承诺会解决。这就是您使父承诺依赖于.then()处理程序中其他承诺的方式。您从.then()处理程序返回一个承诺。

而且，对于您的外部$.when.apply($, req)来说，完全相同的问题也适用。您根本不需要在那里延迟。只需使用$.when()已经返回的承诺即可。

把它放在一起

这是代码的清理版本，可在多个地方消除反模式。这不会改变b(i)调用之间的顺序。如果您关心这一点，那将是一个更大的变化，我们需要查看更多的实际/实际问题才能知道最好的建议。

function a() {
    var req = [];

    for (var i = 0 /*...*/) {
        for (var j = 0 /*...*/) {
            (function(i, j) {
                req.push($.ajax({
                    //params
                }).then(function(resp) {
                    var req2 = [];

                    for (var k = 0 /*...*/) {
                        for (var l = 0 /*...*/) {
                            req2.push(b(l));
                        }
                    }

                    return $.when.apply($, req2).done(function() {
                        console.log("Got all data pieces");
                    });
                }));
            })(i, j);
        }
    }

    return $.when.apply($, req).done(function() {
        console.log("Got all data");
    });
}    

function b(j) {
    return $.ajax({
            //params
    }).then(function(data) {
        console.log("Got data piece #" + l);
        return data;
    });
}

function main() {
    //...

    a().then(function() {
        console.log("All done");
        displayPage();
    });

    //...
}

附言如果要按顺序处理同一组中的b(i)结果，则不要对单个promise使用.then()处理程序，因为它们将以任意顺序执行。相反，请使用$.when().then(result1, result2, ...)附带的结果并在那里进行处理。尽管个人承诺以任意顺序完成，但$.when()会将结果收集到原始顺序中，因此，如果您在$.when()处理程序中处理结果，则可以按顺序处理所有结果。