递归获取 returns 一组承诺而不是值

Question

我正在尝试根据 id 从 API 父项的 returns 个子项创建类别树。

API 示例：

[
  {
    "attr": {
      "id": "cat_11597"
    },
    "data": "name 1",
    "state": ""
  },
  {
    "attr": {
      "id": "cat_8"
    },
    "data": "name 2",
    "state": "closed"
  }
]

genTree('').then(value => console.log(value));

function genTree(id) {
    return Promise.all([fetch(URL+'getCategories?id=' + id)
        .then(function (response) {
            return response.json();
        })
        .then((treeStructure) => {
            let promises =   treeStructure.map(item  => {
                if (item.state === "closed") {
                    item.children =  getTree(item.attr.id.split('cat_')[1]);
                    return item;
                } else return item;
            });
            return Promise.all(promises);
        })])
};

问题是控制台立即输出一个父数组，每个父子包含 promise 而不是子数组。

你能告诉我如何防止这种情况发生所以它只 returns 整个数组没有承诺吗？

谢谢。

Answer 1

each parents children contain promise instead of an array of children.

是的，这就是你在这里做的事情：

item.children =  getTree(item.attr.id.split('cat_')[1]);

promises 数组实际上并不包含承诺，而是包含项目，因此 Promise.all 是无用的。在将其结果分配给项目之前，您实际上需要等待 getTree 调用：

function genTree(id) {
    return fetch(URL+'getCategories?id=' + id).then(response => {
        return response.json();
    }).then(treeStructure => {
        let promises = treeStructure.map(item => {
            if (item.state === "closed") {
                return getTree(item.attr.id.split('cat_')[1]).then(children => {
//              ^^^^^^^^^^^^^^                                ^^^^
                    item.children = children;
                    return item;
                })
            } else {
                return Promise.resolve(item);
            }
        });
        return Promise.all(promises);
    });
}

递归获取 returns 一组承诺而不是值

Recursive fetch returns an array of promises instead of values

javascript

fetch

es6-promise