将请求链接到 Vue.js 中的服务器

Question

假设我需要对不同的 API 端点进行两次异步调用。第二次调用的查询参数取决于我从第一次调用中收到的内容

快速概览：

第一个端点按特定顺序提供一些 ID（例如，按评级排序）
第二个端点提供一些 "meta information" 关于那些 ids

端点示例：

GET/endpoint/one

响应格式：

[
  {
    id: 1,
    rating: 0.67
  },
  {
    id: 2,
    rating: 0.51
  },
  {
    id: 3,
    rating: 0.45
  },
  ...
]

GET/endpoint/two?id=1,2

// I receive those ids from call to the first endpoint

响应格式：

[
  {
    id: 1,
    gender: "male",
    age: 20,
    profession: "Programmer"
  },
  {
    id: 2,
    gender: "transgender",
    age: 27,
    profession: "ML Engineer"
  }
]

之后我需要遍历我拥有的所有 ID 并在我的模板中显示元信息，但顺序应该与响应 endpoint/one[= 时的顺序相同56=]

我决定创建一个密钥：val 存储以满足这些需求，即：

const storage = { 1: { gender: "male", age: 20, profession: "programmer" } }

我还有一个变量来自第一个端点的人，即：

const persons = [ { id: 1, rating: 0.67 }, ... ]

所以在我的模板中我可以做类似
的事情
<p v-for="p in persons">{{ storage[p.id].gender }}</p>

问题是：在我调用启动我的请求的某个函数后，如何链接我的请求以使所有数据可用？

*请记住，我只能使用两个 ID 查询第二个端点，因此我需要遍历我拥有的 ID 列表，并对每个 ID 进行单独调用。在一个真实的应用程序中，我有来自第一个端点的约 100 个 ID，因此我需要对第二个端点进行约 50 次调用

Answer 1

这里有一个例子：https://jsfiddle.net/lucaskatayama/qxyn1rp1/3/

其实这不是VueJS的问题。这是一个由 Promises 或 Callbacks 或 Async/Await 解决的异步问题 Javascript.

在我的示例中，我使用 Promises 解决了问题。

我在那里模拟请求创建一个超时并在完成时返回一个 Promise。 Axios 做同样的事情。

当 Promise 解析时，您可以使用 .then 链接并传递另一个函数来调用第二个请求。然后然后然后然后。

在 then 中，您可以根据需要使用响应，根据返回的数据创建另一个请求，请求另一个列表等。

对于很多请求，我更喜欢使用async库来限制每次请求的数量。

将请求链接到 Vue.js 中的服务器

Chain requests to the server in Vue.js

vue.js

vuejs2

axios

vuex