多个条件异步递归函数和 jQuery 承诺答案

【问题标题】：Multiple conditional asynchronous recursive functions and jQuery promises多个条件异步递归函数和 jQuery 承诺
【发布时间】：2016-02-24 09:14:13
【问题描述】：

我有一个复杂的递归 javascript 函数，在我需要开始使用异步函数（本例中为 jQuery.ajax）之前，它运行良好。我在下面包含了一些伪代码，它们给出了情况的要点。我想使用承诺（而不是当前的回调）来实现此代码，但无法弄清楚如何处理递归和多个条件 ajax 调用。如果我正确理解承诺，它们允许您对异步调用的返回采取行动，但我该如何处理以下情况？

function wrapperFunction(success,error) {
    var level = 0;
    result = [];

    var innerFunction = function(info,result,success,error) {
        level++;

        jQuery.ajax({
            url: 'baseurl1' + info,
            success: parseData,
            error: error
        });

        function parseData(data) {
            data.forEach( function(item) {
                result.push(item.something);

                if ( item.info ) {
                    innerFunction(item.info, result, success, error);
                }
            });

            if ( data.condition ) {
                jQuery.ajax({
                    url: 'baseurl2' + info,
                    success: parseData2,
                    error: error
                });
            }

            function parseData2(data2) {
                data2.forEach(function(item2) {
                    if ( item2.condition ) {
                        jQuery.ajax({
                            url: 'baseurl3' + info,
                            success: parseData3,
                            error: error
                        });
                    }
                });
                function parseData3(data3) {
                    if ( data3.condition ) {
                        jQuery.ajax({
                            url: 'baseurl4' + info,
                            success: parseData4,
                            error: error
                        });
                    }
                    function parseData4(data) {
                        result.push(data2.something + data4.something);
                    }
                }
            }

            level--;
            if (level == 0 && success) {
                success(result);
            }
        }

    }

    innerFunction('rootinfo', result, success, error);   
}   

wrapperFunction(
    function(data) {
        // process success
    },
    function(err) {
        // handle errors
    }
}

正如我已经说过的，这只是伪代码。我最初是从我的真实代码中提取它，看看我是否能理解实际的结构。我知道如果 ajax 调用是同步的，它会起作用，但现在它们是异步的，它只是有时起作用（取决于调用返回的速度）。

如何使用 Promise 实现这种情况？

编辑

我刚刚研究了如何使用 Promise 来序列化所有内容，尽管这是等待所有内容完成的一种方法，但我宁愿并行运行多个调用，然后找到一种方法来等待所有内容完成。我知道这可以通过 promises 实现，但我不知道如何。

【问题讨论】：

为什么要使用 Promise？与您目前拥有的相比，它们没有提供任何真正的好处。另请注意，这里没有递归。您可能可以整理代码以使其更优雅，但这取决于每个函数所需的范围及其检索的数据。
InnerFunction 调用 ajax 查询，成功时调用 parseData，特定条件下调用 innerFunction。这对我来说就像递归。
你可以这样做：jsfiddle.net/sandenay/0pa0L9dx
这样你的 AJAX 调用会并行触发，然后我们可以等待所有的 Promise 解决
@RoryMcCrossan 正如 Chris 所说，innerFunction 被递归调用。至于承诺，我不知何故需要一种方法来等待所有 ajax 查询完成后再继续。如果您知道没有承诺的方法，请随时分享。

标签： javascript jquery ajax asynchronous recursion

【解决方案1】：

在 Sandeep Nayak 的帮助下，我得到了它的帮助（参见上面的 cmets）。我以为我为遇到此帖子的任何人发布了伪代码的工作版本。

我基本上添加了两个级别的承诺（外部和内部），如果所有内部承诺都得到解决，那么外部承诺就会得到解决。可能有整理代码的空间，但它可以按原样工作。

function wrapperFunction(success,error) {
    var level = 0;
    var result = [];
    var outerPromises = [];

    var innerFunction = function(info,result,success,error) {
        var outerPromise = new jQuery.Deferred();
        outerPromises.push( outerPromise );

        level++;

        jQuery.ajax({
            url: 'baseurl1' + info,
            success: parseData,
            error: error
        });

        function parseData(data) {
            data.forEach( function(item) {
                result.push(item.something);

                if ( item.info ) {
                    innerFunction(item.info, result, success, error);
                }
            });

            if ( data.condition ) {
                jQuery.ajax({
                    url: 'baseurl2' + info,
                    success: parseData2,
                    error: error
                });
            } else {
                outerPromise.resolve();
            }

            function parseData2(data2) {
                var innerPromises = [];

                data2.forEach(function(item2) {
                    var innerPromise = new jQuery.Deferred();
                    innerPromises.push( innerPromise );

                    if ( item2.condition ) {
                        jQuery.ajax({
                            url: 'baseurl3' + info,
                            success: parseData3,
                            error: error
                        });
                    } else {
                        innerPromise.resolve();
                    }

                    function parseData3(data3) {
                        if ( data3.condition ) {
                            jQuery.ajax({
                                url: 'baseurl4' + info,
                                success: parseData4,
                                error: error
                            });
                        } else {
                            innerPromise.resolve();
                        }
                        function parseData4(data) {
                            result.push(data2.something + data4.something);

                            innerPromise.resolve();
                        }
                    }
                });

                jQuery.when.apply(undefined, innerPromises).then( function() { outerPromise.resolve(); } );
            }

            level--;
            if (level == 0 && success) {
                jQuery.when.apply(undefined, outerPromises).then( function() { success(result); } );
            }
        }

    }

    innerFunction('rootinfo', result, success, error);   
}   

wrapperFunction(
    function(data) {
        // process success
    },
    function(err) {
        // handle errors
    }
}

【讨论】：