1

我对使用 API 很陌生，所以如果这真的很琐碎，请原谅我。

我想使用两个 GET 请求：

  • /workflow/search将允许我获得完整的工作流列表及其数据（即工作流 ID）。
  • /workflow/{workflowId}将允许我获得具有更多详细信息的特定工作流程。

我目前importedWorkflows在我的数据函数中，其中填充了我从/workflow/search调用中获得的内容。如果我想了解有关工作流程的更多信息，那么我想致电/workflow/{workflowId}.

然而，这真的很困难，尤其是因为我使用 Jquery 来获取 JSON 数据。

$.getJSON(dataURL, function(data) {
      self.importedWorkflows = data.results;
    });

由于它都是异步的，我真的只想在/workflow/{workflowId}准备好时访问找到的信息。

这是我实现这一目标的尝试：我已经计算了调用数组importedWorkflowDefinitions，它遍历了所有找到的工作流，并对每个工作流/workflow/search进行/workflow/{workflowId}调用。我将每个调用返回的 JSON 数据存储在计算数组中。然后，我使用一种方法调用generateWorkflowById()来查找工作流 JSON 中的importedWorkflowDefinitions.

然而...

在我的 Vue 应用程序中，我有一个使用 v-for 指令制作的表格。

<tbody v-for="workflow in workflowsOnPage">
     <tr class="expandable-row" :id="workflow.workflowId">
          <td>{{ generateWorkflowById(workflow.workflowId).workflowName }}</td>
          <td>{{ workflow.workflowId }}</td>
          <td>{{ workflow.status }}</td>
          <td class="text-align-right">{{ workflow.startTime }}</td>
          <td class="text-align-right">{{ workflow.endTime }}</td>
          ...

注意： workflowsOnPage是一个计算出来的 JSON 数组，将importedWorkflows.

所以，本质上发生的事情是表格将呈现没有generateWorkflowById(workflow.workflowId).workflowName值，因为第一次调用/workflow/search还没有完成。此外，即使workflowDefinitions已计算并且在/workflow/search调用完成时会更改，表已经完成渲染并且不会generateWorkflowById(..)再次运行该方法。

有没有办法将通过/workflow/{workflowId}调用找到的信息呈现到表格上，而我的所有数据都不会发生这种竞争？

顺便说一句，我正在与 Netflix Conductor 合作，所以如果有更好的 API 调用或不同的方式来访问与工作流有关的所有详细信息，因此我不必进行这些依赖 API 调用，请告诉我知道！

谢谢！

4

3 回答 3

1

这里有几件事...

  1. 计算属性用于根据反应属性返回新值。他们不应该执行任何异步功能
  2. 调用方法来渲染模板的某些部分效率非常低，并且可能导致更多问题，例如无限循环
  3. 混合 Vue 和 jQuery？直接说“不” ‍♂️</li>

在这里，一种不同的方法是在created组件的钩子中获取所有数据，并显示仍在组合在一起的部件的加载指示符

export default {
  data: () => ({
    importedWorkflows: []
  }),
  computed: {
    workflowsOnPage () {
      return .... // whatever you do to importedWorkflows to "divide" them
    }
  },
  async created () {
    const res = await fetch('/workflow/search')
    const workflows = (await res.json()).results

    // assign the new array values once all fetches are resolved
    this.importedWorkflows = await Promise.all(workflows.map(async workflow => {
      const res = await fetch(`/workflow/${workflow.workflowId}`)
      const details = await res.json() // assuming this is correct
      return {
        ...workflow,
        details
      }
    }))
  }
}

<p v-if="workflowsOnPage.length === 0">Loading...</p>

<!-- snip -->

<!-- this won't render until the "workflowsOnPage" array has elements -->
<tbody v-for="workflow in workflowsOnPage">
  <tr class="expandable-row" :id="workflow.workflowId">
    <td>{{ workflow.details.workflowName }}</td>
    <td>{{ workflow.workflowId }}</td>
    <td>{{ workflow.status }}</td>
    <td class="text-align-right">{{ workflow.startTime }}</td>
    <td class="text-align-right">{{ workflow.endTime }}</td>
    <!-- etc -->
  </tr>
</tbody>

请注意，我已将额外的/workflow/{workflowId}详细信息从details.workflow/workflow/search

于 2020-08-05T04:43:24.467 回答
0

它已经存储在 Elasticsearch 中。检查您的弹性搜索信息：http://localhost:8080/api/admin/config

您可以从那里查询数据，比指挥 api 快得多，并减轻主要用于执行的 API 的负载。从 ES 中读取还可以让您更轻松、更高效地进行各种转换。

于 2020-09-12T21:45:09.847 回答
-1

简短回答：使用 vuex 存储，注册一个将执行获取请求的操作并创建一个突变，它将请求的响应存储到存储变量内的状态变量，然后使用计算检索存储变量并将其用于您的模板

于 2020-08-05T10:24:06.277 回答