Async–由多个基于promise的API调用形成的Orgchart，这些调用返回相互依赖的数据

Question

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

假设我们有五行空间Math.floor（window.innerHeight/150）

API以单元ID作为查询，如果传递0，则获得顶级单元。检索前两行（父行）的步骤

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

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

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

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

如果代码是同步的，这不会是一个问题，但是读取是基于promise的，因此引入了异步世界。我不想阻塞主线程，所以我知道异步是理想的。我不能绕着做顺序的API调用，在这些调用中，上一次调用的数据是必要的，并且下一次调用可以访问。如果有可能最终得到一个包含不同“行”的单一对象，我可以在检索必要的数据后进行DOM操作/样式化时访问这些对象。

任何建议/输入都非常感谢！




Answer 1

这是一种promise比回调更容易让你生活的情况。

一般的想法是：

>

创建一个async函数，该函数将返回一个API调用（即promisify您的API调用）

创建一个async函数，该函数将返回一个包含构建对象的对象和一组行（{result:{id:0，children:[{…}，{…}），rows:[0:[{…}]，1:[{…}，{…}]，2:[{…}，{…}，{…}}）

在其中，等待记录的API请求0，并将其用作“根目录”（或者，如果网格被滚动并且您正在加载更多内容，则在第一行中添加一些过去的行）

循环查看所需的后续行数

• 循环上一行中的父对象，并获得每个父对象的子对象，将它们附加到相应的父对象以及相应的行数组（因此您可以轻松获得计数）
  • 等待调用获取一项功能
  • 将获得的项目放在其父级的子属性（或类似属性）中，也放在正确的行数组中

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

  笔记：

  • 查看Promise.all作为同时请求一行中所有子行的一种手段，或者一些受限制的实现，一次执行多个请求
  • 如果您有权限修改API，那么添加一个需要深度的树endpoint会更有效。根据图表的大小，返回一个完整的树可能比执行几十个请求更有效。或者，您的树endpoint可以接受starLevel和endLevel，并且只返回一个部分。