Looking for a performant approach to send circa 1000+ requests in batches e.g 6 in parallel, and when these 6 have completed, send next 6
Sending in batches will prevent the browser request queue from fully blocking any other API requests that may occur while the batch calls are in progress
I have done this previously with RxJS (example below), but wondering is there an equivalent fetch Promise based approach?
// Array of observables
const urls = [
this.http.get('url1'),
this.http.get('url2'),
this.http.get('url3'),
...
];
bufferedRequests(urls) {
from(urls).pipe(
bufferCount(6),
concatMap(buffer => forkJoin(buffer))
).subscribe(
res => console.log(res),
err => console.log(err),
() => console.log('complete')
);
}
I used bottleneck a while ago.
It allows you to bottleneck your requests with a client side rate limiter. You can choose how many requests to send out per minute and how many concurrent ones can run too.
You can set up a limiter:
const limiter = new Bottleneck({
maxConcurrent: 1,
minTime: 333 //this will execute 3 requests every second, aka wait 333 ms to execute the next request
});
then wrap your function with it.
const wrapped = limiter.wrap(myFunction);
wrapped(arg1, arg2)
.then((result) => {
/* handle result */
});
In your case, I'd write a function that wraps around the fetch requests and returns a promise. Then, I would wrap that with the limiter. Here's an example:
const throttledGetMyData = limiter.wrap(yourFetchFunction);
const allThePromises = requests.map(item => {
return throttledGetMyData(request);
})
try {
const results = await Promise.all(allThePromises);
console.log(results);
} catch (err) {
console.log(err);
}
}