Making asyc parallel multiple API calls and then render page

[govind999]

Hi,

I am using this as boilerplate for my project. I have one basic question. Your example shows making an api call, for example if my page needs 3 to 4 api calls and i want them to happen asyc and wait till it finishes and then render the page, what is the best place to write that code.

page load -- 3 api calls -- 3 api calls should happen asyc-- then render page.

Thanks.

[peter-mouland]

are you able to make those 3 api calls into a single call to your own server (which can then deal with any business logic)? ...or is that ind of avoiding the point/question?

[bananaoomarang]

If you want to do it similar/how it is done here, you should just put them in separate actions then mark them as needs on the component.

This will make the async calls in parallel then render the page, if you need them to happen in sequence for some reason you will need to write them into one action (probably as a promis chain if you follow the example set here)

Am happy to help with any of this if you want.

[govind999]

@bananaoomarang, can you point me to any example. I want to make 3 different api calls in parallel. There is no dependency for each. Once these three calls are done, then only i want to render the page. Any pointers will be appreciated. I already got the project up and running with your boiler plat and going through all different kind of documentation.

[govind999]

@peter-mouland , i didn't understand your answer properly, My three api calls are to three different servers with different URLS. So they need to go in parallel for performance reasons gather all the data and then paint it.

[govind999]

@bananaoomarang, i found this in their documentation, can i do like this

axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Both requests are now complete }));

[peter-mouland]

I think what bananaoomarang is saying is :

class Home extends Component {
  static needs = [
    TodoActions.getTodos, TodoActions.getSecondApiCall, TodoActions.GetAnother
  ];
 ...

[bananaoomarang]

Yup, that looks good. I can’t say for sure without more information, but that’s probably what I’d do.

You can also combine the requests into a single action and use axios.all, but there is no limitation on how many async actions you can require before rendering a component.

[govind999]

Thank you both, thats what i exactly did. In the page container i made those two calls like that.