Rxjs/reactor limit operator equivalent for ajax requests

Question

What i am trying to achive is execute many ajax requests(vary from 10 to 1000+) concurrently but on a limit of active requests of 5 (like a FIFO queue in terms of execution of the request).

For example we have an array of 100 http address and we want to get first 5 and perform a GET request for each one, if any of these five requests ends then another address should enter the queue and perform its GET request untill all 100 addresses make a request and finish.

With the reactor library there is limitRequest operator which fits my description

my question is how do i achive a similar behaviour with rxjs?

I tried with buffer operator but it emits results every 5 requests completed, what i want is to emit results as soon as a request is completed.

I have created a stackblitz

trying to experiment on this

Answer 1

You can do all this with just two mergeMaps. The mergeMap operator accepts a second parameter which is the number of concurrent Observables. The first mergeMap will be used to unpack the array of URLs coming from the server and the second one will keep 5 concurrent requests:

Based on your stackblitz demo (thanks for providing a demo by the way) you can put all this into a single RxJS chain.

from(axios.get("https://jsonplaceholder.typicode.com/photos")).pipe(
  mergeMap(response => response.data // Unwrap the array of URLs into single emissions
    .filter(x => x.albumId === 100)
    .map(x => x.url)
  ),
  mergeMap(url => of(url).pipe(delay(1000 * Math.random())), 5), // Mock additional requests with of() and delay()
).subscribe(console.log);

Your updated demo: https://stackblitz.com/edit/photo-dls-pb27pn?file=index.js