Javascript 异步–；由多个基于承诺的API调用形成的Orgchart返回相互依赖的数据

我正在制作一个组织结构图，以网格的形式显示单位的层次结构。对API的调用返回一个JSON对象，该对象包含一个单元及其所有子对象的数组。父项和子项都有ID以及一些其他杂项数据。为了使图表最具性能，我不会加载比浏览器窗口中更多的“行”。我遵循的设计约束确定，父对象正下方的子对象应该是中间的子对象。在加载了所有适合初始浏览器窗口的单元后，它们需要接收适当的样式，将它们放置在CSS网格中

假设我们有足够的空间容纳5行

Math.floor（window.innerHeight/150）

API以单元ID作为查询，如果传递0，则获得顶级单元。为了检索前两行（父行和子行），我们调用
fetch（'../api/org/0'）

然后，我们需要找到中心孩子，并根据其ID进行新呼叫

let centre = Math.floor(responseFromPreviousCall.children.length / 2);
fetch(`…/api/org/${responseFromPreviousCall.children[centre].id}`);

我们现在有3行数据。最后一步需要再做两次，所以我们有5行。同样，适合初始浏览器窗口的行数可能会更改。我以5为例

在接收到所有数据之后，我需要检查哪些行具有最多的子行，这样我就可以为整个CSS网格设置列数。然后我可以开始做必要的DOM操作和CSS样式，以显示网格中的所有数据。这样做时，我觉得将上述API调用生成的数据放在一个对象中会很好

如果代码是同步的，这不会是一个问题，但是fetch是基于承诺的，因此引入了异步的世界。我不想阻塞主线程，所以我知道异步是理想的。如果上一次调用的数据对于下一次调用是必需的和可访问的，那么我就不能在连续的API调用中绞尽脑汁了。如果有可能最终得到一个包含不同“行”的单个对象，我可以在检索必要的数据后进行DOM操作/样式设置时访问这些行

非常感谢您的任何建议/意见
 这种情况下，承诺会让你的生活比回访容易得多

总的想法是：


创建一个
async
函数，该函数将返回一个API调用（即promisify您的API调用）
创建一个
async
函数，该函数将返回一个包含构建对象的对象和一组行（
{result:{id:0，children:[{…}，{…}]，rows:[0:[{…}]，1:[{…}，{…}]，2:[{…}，{…}，{…}]}
）
在其中，
等待
记录的API请求
0
，并将其用作“根目录”（或者，如果网格被滚动，并且您正在加载更多内容，则在第一行中添加一些过去的行）
循环查看所需的后续行数


循环上一行中的父对象，并获取每一行的子对象，将它们附加到相应的父对象，以及相应的行数组（以便轻松获取计数）

等待
调用“获取一项”功能
将获取的项放入其父项的子属性（或类似属性）中，并放入正确的行数组中


返回结果，该结果包含对象树和行数组


注意事项：


查看
Promise.all
作为一种同时请求一行中的所有子项的方法，或者它的一些限制实现，一次执行多个请求
如果您有权修改API，则添加一个具有深度的树终结点会更有效。根据此图表的大小，返回一个完整的树可能比执行几十个请求更有效。或者，您的树终结点可以接受startLevel和endLevel，而只返回一个部分