相当于Ajax请求的Rxjs / reactor限制运算符

时间:2018-11-28 09:29:08

标签: javascript ajax rxjs reactor

我要达到的目标是同时执行许多ajax请求(从10到1000+),但活动请求的限制为5(就请求的执行而言,就像FIFO队列一样)。

例如,我们有一个由100个http地址组成的数组,我们想要获取前5个,并对每个请求执行一个GET请求,如果这五个请求中的任何一个结束,则另一个地址应进入队列并执行其GET请求,直到全部100个地址发出请求并完成。

在反应堆库中,有一个limitRequest运算符符合我的描述

我的问题是我如何使用rxjs达到类似的行为?

我尝试使用缓冲区运算符,但它每完成5个请求就会发出结果,我想要的是在请求完成后立即发出结果。

我创建了一个stackblitz

尝试对此进行实验

1 个答案:

答案 0 :(得分:2)

您只需两个mergeMap即可完成所有这些操作。 mergeMap运算符接受第二个参数,即并发Observable的数量。第一个mergeMap将用于解压缩来自服务器的URL数组,第二个将保留5个并发请求:

基于您的stackblitz演示(感谢您提供演示),您可以将所有这些放到单个RxJS链中。

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);

您的更新演示:https://stackblitz.com/edit/photo-dls-pb27pn?file=index.js