代码之家  ›  专栏  ›  技术社区  ›  Hacking Node

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

  •  1
  • Hacking Node  · 技术社区  · 7 年前

    假设我需要对不同的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

    1 回复  |  直到 7 年前
        1
  •  2
  •   Lucas Katayama    7 年前

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

    实际上,这不是VueJS的问题。这是一个异步问题,由 承诺 回调 ,ou 异步/等待

    在我的例子中,我解决了使用承诺的问题。

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

    当承诺解决时,您可以使用 .then 并传递另一个函数来调用第二个请求。然后,然后,然后。

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

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