javascript - 异步 – 由多个基于 Promise 的 API 调用形成的 Orgchart，返回彼此依赖的数据

Question

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

假设我们有五行的空间 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 调用生成的数据放在一个对象中会很好。

如果代码是同步，那么这不会成为问题，但获取是基于 promise ，因此异步的世界是介绍了。我不想阻塞主线程，所以我知道异步是理想的选择。我无法全神贯注地执行顺序 API 调用，其中前一个调用的数据对于下一个调用来说是必需的且可访问的。如果有可能最终得到包含不同“行”的单个对象，我可以在检索必要的数据后进行 DOM 操作/样式设置时访问该对象。

非常感谢任何建议/意见!

Answer 1

在这种情况下，与回调相比，promise 会让你的生活变得更加轻松。

总体思路是:

• 创建一个 async 函数，该函数将返回单个 API 调用(即 promise 您的 API 调用)
• 创建一个 async 函数，该函数将返回一个包含构建对象和一组行的对象 ({result: {id: 0, Children: [{...}, { ...}]，行:[0:[{...}]，1:[{...}，{...}]，2:[{...}，{...}， {...}]})
• 在其中，等待对记录0的API请求，并将其用作您的“根”(或者如果网格滚动，则将过去的行作为第一行的种子)并且您正在加载更多)

• 循环遍历您需要的任意数量的后续行

  • 循环前一行中的父对象并获取每个子对象，将它们附加到各自的父对象以及相应的行数组(这样您就可以轻松获得计数)
    • 等待调用您的“获取一项”函数
    • 将获取的项目放入其父级的 child 属性(或类似属性)中，以及正确的行数组中

• 返回结果，其中包含对象树和行数组

注释:

• 研究 Promise.all 作为一种同时请求一行中所有子级的方法，或者它的某种限制实现，一次执行多个请求
• 如果您有权修改 API，那么添加具有深度的树端点会更有效。根据此图表的大小，返回单个完整的树可能比执行数十个请求更有效。或者，您的树端点可以接受 startLevel 和 endLevel 并仅返回一个部分。