使用axios在Vuejs页面中的多个并发请求

Question

I've created a small component using Vuejs that makes an Ajax request to a passed URL to determine its initial value.

When I have a few instances of that component, everything is fine. But if I have more than 5/6 instances, all the requests will be pending forever and I need to restart Valet in order to be able to access any of my local websites.

Each instance is pointing to a different endpoint in the same domain:

Instance1 => example.com/endpoint1

Instance2 => example.com/endpoint2

Instance3 => example.com/endpoint3

...

Each instance doesn't know anything about the others. They don't communicate between them at all.

Why is this issue happening? Is it browser related or is it server related?

(For the backend I'm using Laravel 5.5 running on Valet)

Answer 1

I believe only you can answer that question doing more logging on both front and back end.

The solution would be to have a parent component that do the ajax calls and then pass the results to the child components.

That way you will be able to limit the number of simultaneous requests and, if needed, add a timeout between requests.

You could implement that and play with the variables (number of simultaneous requests and timeout between batches) until it's working but I would advise you instead to understand first where the problem come from and we no have enough information to help you on that.