Chain requests to the server in Vue.js

Question

Let's say I need to make two async calls to different API endpoints. Query parameters of second call depend on what I receive from the first one

Quick overview:

First endpoint provides some ids in specific order (sorted by rating, for example)
Second endpoint provides some "meta information" about those ids

Endpoint examples:

GET/endpoint/one

response format:

[
  {
    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

response format:

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

Afterwards I need to loop through the all the ids I have and display meta info in my template, but order should be the same as it was in response of the endpoint/one

I decided to crate a key: val storage for those needs, i.e:

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

also I have a variable with persons from first endpoint, i.e:

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

so in my template I could do smth like

<p v-for="p in persons">{{ storage[p.id].gender }}</p>

The question is: how I could chain my requests to have all the data available after I call some function, which initiates my requests?

*Keep in mind that I could query the second endpoint only with two ids, so I will need to loop through the list of ids I have and make a separate call for each one. In a real app I have ~ 100 ids from the first endpoint, so I need to make ~ 50 calls to the second one

Once you receive the list of ids, you can use Promise.all to make sure you have all the data before proceeding. Smarter would be to declare mutations for adding ids, and render them as they come. — Andrei Nemes
– Andrei Nemes, Commented Oct 18, 2017 at 20:54
Side note: "transgender" is not a gender. ux.stackexchange.com/questions/25826/… — ceejayoz
– ceejayoz, Commented Oct 18, 2017 at 21:27
@ceejayoz thx for a clarification! Since I'm really confused with things happening around (touching this trans stuff) — Hacking Node
– Hacking Node, Commented Oct 19, 2017 at 18:33
@HackingNode Yeah, it can be confusing, and it's good that you're trying to consider transgender people in your UX decisions. — ceejayoz
– ceejayoz, Commented Oct 19, 2017 at 18:48

Lucas Katayama · Accepted Answer · 2017-10-19 00:49:57Z

2

Here is an example: https://jsfiddle.net/lucaskatayama/qxyn1rp1/3/

Actually, that is not a VueJS problem. That is a async problem solved by Promises, or Callbacks, ou Async/Await in Javascript.

In my example, I solved using Promises.

There I simulate requests creating a Timeout and returning a Promise when it is done. Axios do the same thing.

When a Promise resolves you can chain by using a .then and passing another function to call the second request. and then and then and then.

Inside the thenyou can use the response as you wish, creating another request based on the returned data, requesting another list, etc.

To do with a lot of requests, I prefer using async library to limit the number of request per time.

answered Oct 19, 2017 at 0:49

Lucas Katayama

4,61030 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hacking Node Over a year ago

Thanks for the answer! I've tried it in my real app, but now I have issues with looping through the list in my template (Looks like loop starts at the same time with requests and throws %property% is undifined). Button click initiates the requests. If I press button two times - it renders the content, as I understand because on the second click everything is defined ;) * I can't use created hook, since in the real app I need to pass an id to the first request

Lucas Katayama Over a year ago

Ok.. instead of having a component with v-for, iterating over a list and fetching, you could have a component with a list of child components, and each child one could fetch when it was created.

Collectives™ on Stack Overflow

Chain requests to the server in Vue.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related