Question

我正在尝试通过API创建一棵类别树，该树按ID返回父级的子级。

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，而不是孩子的数组。

您能告诉我如何防止这种情况，以便它仅返回整个数组而没有承诺吗？

谢谢。

Answer 1

每个父母的孩子都充满希望，而不是一系列孩子。

是的，这就是您在这里所做的：

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

promises数组实际上并不包含Promise而是项，因此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);
    });
}

递归获取返回一个promise数组，而不是值

1 个答案: