javascript - 递归函数不返回 promise

Question

背景

我有一个问题，我的 promise 没有返回到它的调用函数。我知道这通常会起作用，但在递归函数中却行不通。正在调用解析，我可以看到函数 FindElementById 正在正确找到元素，但是未调用可调用的 UpdateMasterMenuItem(result, queuedItem) 中的调用。

我在我的代码片段中做什么，我想做什么？

遍历集合 queuedItems 并在另一个集合 menuItems 中找到这些项目。为此，我将要查找的项目的 ID 及其所在的集合传递给递归函数 FindElementById。找到该项目后，我将返回找到的项目并在函数 UpdateMasterMenuItem 中对其执行一些其他操作。

代码

// Calling Loop
        queuedItems.forEach(function (queuedItem) {
            FindElementById(queuedItem.dataset.id, menuItems).then(function(result) {
                UpdateMasterMenuItem(result, queuedItem);
            });
        });


// Recursive Function
function FindElementById(id, menuItems) {
    return new Promise((resolve) => {
        menuItems.forEach(function (menuItem) {
            if (menuItem.Id === id) {
                return resolve(menuItem);

            } else if (menuItem.Child.length > 0) {
                FindElementById(id, menuItem.Child);
            }
        });
    });
}

Answer 1

问题来自 else if block :当你递归调用方法本身时，你还需要在嵌套的 promise 被解决后调用 resolve() :否则.then() 回调永远不会触发。

function FindElementById(id, menuItems) {
    return new Promise((resolve) => {
        menuItems.forEach(function (menuItem) {
            if (menuItem.Id === id) {
                return resolve(menuItem);

            } else if (menuItem.Child.length > 0) {
                // You also need to remember to resolve here!
                FindElementById(id, menuItem.Child).then(nestedMenuitem => resolve(nestedMenuitem));
            }
        });
    });
}

但是，有一个问题:promise 只能 resolve 一次。因此，如果满足条件，您的 promise 实际上是在 forEach 循环的第一次迭代中解决的。那是你要的吗？如果 ID 确实是唯一的，或者在重复 ID 的情况下您只想返回第一个实例，那么这没问题。

这让我们回到我的评论:你的函数没有做任何异步操作，所以完全没有 promise 可能更容易:

function FindElementById(id, menuItems) {
    let el;
    for (let menuItem of menuItems) {
        if (menuItem.Id === id) {
            el = menuItem;
            break;
        } else {
            el = FindElementById(id, menuItem.Child)
        }
    }

    return el;
}