Question

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

快速概述：

第一个端点按特定顺序提供一些ID（例如按评级排序）
第二个端点提供了一些元信息＆＃34;关于那些ids

端点示例：

获取/端点/一个

响应格式：

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

获取/端点/ 2？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并在我的模板中显示元信息，但顺序应该与端点/一个

的响应相同

我决定给出一个关键词：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列表并为每个端口单独调用。在一个真实的应用程序中，我有来自第一个端点的~100个ID，因此我需要对第二个端点进行~50次调用

Answer 1

以下是一个示例：https://jsfiddle.net/lucaskatayama/qxyn1rp1/3/

实际上，这不是VueJS问题。这是由Javascript中的 Promises 或回调，ou Async / Await 解决的异步问题。

在我的例子中，我解决了使用Promises。

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

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

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

为了处理大量请求，我更喜欢使用async库来限制每次请求的数量。

在Vue.js

1 个答案: