我应该在哪里存储从 GET 请求中检索到的 JSON 以便我可以在 v-for 指令中访问它？

Question

我对使用 APIs 还很陌生，所以如果这真的很微不足道，请原谅我。

我想使用两个 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() 的方法在 importedWorkflowDefinitions.

中查找工作流 JSON

不过...

在我的 Vue 应用程序中，我有一个使用 v-for 指令创建的 table。

<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.

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

有没有一种方法可以将通过 /workflow/{workflowId} 调用找到的信息呈现到 table 上，而不用我所有的数据进行竞争？

顺便说一句，我正在使用 Netflix Conductor，所以如果有更好的 API 调用或不同的方式来访问与工作流程有关的所有详细信息，那么我就不必拨打这些依赖 API 电话，请告诉我！

谢谢！

Answer 1

这里有几件事...

计算属性用于 return 基于反应属性的新值。他们不应该执行任何异步功能
调用方法来呈现部分模板效率非常低，并且可能导致更多问题，例如无限循环
混合使用 Vue 和 jQuery？就说 “不” ‍♂️

在这里，一种不同的方法是在组件的 created 挂钩中获取所有数据，并显示 loading 仍在组合在一起的部分的指标

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} 中的额外详细信息加载到每个 workflow 对象 return 的 details 属性中 [=16] =].

Answer 2

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

Answer 3

它已经存储在 Elasticsearch 中。从以下位置检查您的 elasticsearch 信息： http://localhost:8080/api/admin/config

你可以从那里查询数据，比 conductor api 快得多，并且减轻了主要用于执行的 API 的负载。 Read from ES也让你做各种转换更简单更高效

我应该在哪里存储从 GET 请求中检索到的 JSON 以便我可以在 v-for 指令中访问它？

Where should I store the JSON retrieved from a GET request so that I have access to it in a v-for directive?

javascript

jquery

vue.js

netflix-conductor