将请求链接到Vue中的服务器。js公司

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

快速概述:

• 第一个端点按特定顺序提供一些ID(例如,按评级排序)

• 第二个端点提供了一些关于这些ID的“元信息”

端点示例:

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,并在模板中显示元信息,但顺序应该与响应 端点/一个

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个到第二个端点的ID