I bundle 115 fetch requests into a Promise.all in order to load mandatory resources. The problem is that they all fire at once and - depending on the server I test it on - either freeze the script entirely or give off a 500 error code.
I implemented a time delay in these requests so that they don't fire all at once, the minimum I manage to set being 50ms which adds up to 5.75 seconds of loading time.
- should I create a new API endpoint which bundles these requests? (I'd rather not to be honest, caching each request separately after they loaded is a huge bonus)
- is there a way to use one connection for all these requests so that it doesn't look like many individual requests to the server?
- is there a way to make the server wait instead of handling all these requests at once?
I am also curious to know how the browser handles this problem since a website can easily want to load more that 100 different resources at a time. I'd love for the browser to handle my many requests in a 'waterfall' manner similar to what's shown in Chrome's web developer tools.
Note that I do NOT want to wait for each fetch request to completely finish before starting another, I just want the requests not to be sent at the same time.
I must mention that I am using a PHP API on an Apache server and a mySQL data base.
let offset = 100
let delay = 0
let requests = ['apiRequest0','apiRequest1','apiRequest2','apiRequest3'...]
let data = {}
await (async() => {
promises = []
requests.forEach(function(item){
promises.push(
(async() => {
await new Promise(function(resolve) { setTimeout(resolve, delay); });
data[item] = await fetch(`/api/${item}`).then(response => response.json())
})()
)
delay += offset
})
return await Promise.all(promises)
})();
- I tried using keep alive in the fetch requests - no changes
- I tried setting execution time and memory limit to higher values - no changes
- I tried adding a delay, which works, but I'd love to have a faster and more reliable solution instead of guessing what the server can cope with
