javascript - 如何正确编写递归 jquery promise

Question

如果我在重复一个已经被问得非常多的问题，请原谅我，但到目前为止我所看到的一切对我来说似乎都不是递归的，或者没有映射到我们正在做的事情，而 promise 和延期的主题似乎是对我来说非常复杂。

我有一个“主题树”，它在用户展开节点时异步构建。该主题是使用 API 端点构建的，该端点在单击主题树节点上的 (+) 按钮时返回节点的子节点。

当用户点击按钮时，我尝试使用如下所示的方法递归加载主题树元素:

function getAssociatedTopics(){
    $.get('/topics/curriculum-associations', {guids: [...]})
    .then(function(data){

        //Process the topic information here
        var topicId = /* some processing */;

        //Get ancestors of each topic returned
        $.get('/topics/getAncestors', {of: topicId})
        .then(function(data){

            //Process the topic information here
            var topicId = /* some processing */;

            //Get ancestors of each topic returned
            //Rinse repeat as long as we find children of each topic found


        });

    }).then(function(){

        //Expand the nodes
        //Select the nodes

    });
}

所以这就是它应该看起来的样子，但我都迷失了阅读文档以确保我的东西以正确的顺序执行......我们现在遇到的这个结构的大问题是我的节点全部加载以并发方式删除所选节点，随时打开和关闭节点，选择最终变得非常困惑。

我不需要对 promises 的深入解释，也不需要完整的解决方案，但我想要一个如何实现它的总体思路。

Answer 1

首先，获取所需内容的复杂性应该在服务器而不是客户端上处理。从客户端发出数百个 HTTP 请求是一场等待发生的性能灾难。

现在，关于您将如何做，有两个重要的事实:

• Promises 通过使用返回值 来工作。 $.get 返回值的 promise - 这就是为什么你可以 then 关闭它，但你也可以将它返回到外部。
• 如果您从 then 处理程序返回一个 promise ，则从 then 返回的 promise 本身将等待内部 promise 首先解决。

下面是说明这两点的例子:

$.get("/api").then(function(data) {
    return $.get("/api2/" + data.id);
}).then(function(data2) {
    // because of point #1, we get the data of the inner call here.
});

现在，针对您的实际问题:

function getAssociatedTopics(guids) {
    // note the `return` here so it can be chained from outside 
    return $.get('/topics/curriculum-associations', {guids: guids})
    .then(function(data){
        var topicId = someProcessing(data);
        // note we return here. I assume this get returns guids. 
        return $.get('/topics/getAncestors', {of: topicId})
    }).then(function (guids) { // this anonymous function can be inlined
        if(guids.length === 0) return; // stop condition
        return getAssociatedTopics(guids); // note the recursive call, remember point #2.
    });
}
getAssociatedTopics(initial).then(function(){
    // all done
});

如果你需要所有调用的结果，你可以将它链接起来，或者你可以在最后一个之前推送到 then 内的一个闭包变量数组，并在 all done 处理程序中访问它。