如何正确编码递归 jquery 承诺

Question

请原谅我重复一个已经非常问的问题，但到目前为止我所看到的一切对我来说似乎都不是递归的，或者没有映射到我们正在做的事情，并且 promises 和 deferred 的主题似乎对我来说非常复杂。

我有一个“主题树”，它在用户展开节点时异步构建。该主题是使用 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

    });
}

所以这就是它应该的样子，但我完全没有阅读文档以确保我的东西以正确的顺序执行......我们现在遇到的这个结构的大问题是我的节点都加载以并发的方式，然后擦除选定的节点，随时打开和关闭节点，选择结束时超级混乱。

我不想要对 Promise 的深入解释，也不想要一个完整的解决方案，而是一个大致的想法如何实现这一点。

Answer 1

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

现在你会怎么做，两个重要的事实：

• Promises 通过使用 返回值 起作用。 $.get 返回值的承诺 - 这就是为什么你可以 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 处理程序中访问它。