多个连续AJAX请求RXJS

Question

我正在尝试按顺序发出多个AJAX请求，每个请求都有一些延迟。我希望每个请求都有顺序的响应。我尝试过mergeMaprxjs运算符。它运行良好，但我希望有一些延迟的响应。目前，我正在按顺序获得每个请求的响应，但每次响应都需要一些延迟。

import { of, from, interval } from 'rxjs'; 
import { map, mergeMap } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';
const items = [1,2,3,4,5];
const requests = from(items)
.pipe(
mergeMap(item => ajax.getJSON(`https://api.github.com/users/${item}`)),  
);
requests.subscribe(
data => console.log(data), //process item or push it to array 
err => console.log(err)
);

以下是stackbliz示例。

多个AJAX请求RXJS

Answer 1

这可以通过使用延迟运算符来完成。

但首先，您需要对项observable阵列上的每个元素使用concatMap，以便为items阵列上的每一项创建一个具有延迟时间的新的可观察对象。

const items = [1,2,3,4,5];
const requests = from(items)
.pipe(
concatMap(item => ajax.getJSON(`https://api.github.com/users/${item}`)
.pipe(
delay(1000),
)
),  
);
requests.subscribe(
data => console.log(data), //process item or push it to array 
err => console.log(err)
);

我在这里制作了一个新的演示。

Answer 2

使用delay尝试此代码：(

const items = [1,2,3,4,5];
const requests = from(items)
.pipe(
mergeMap(item => ajax.getJSON(`https://api.github.com/users/${item}`)),
// delay each element by 1 sec
concatMap(x => of(x).pipe(delay(1000)))
);
requests.subscribe(
data => console.log(data), //process item or push it to array 
err => console.log(err)
);

类似案例：

RXJS 的每个元素的延迟

关于延迟的更多信息：

https://www.learnrxjs.io/learn-rxjs/operators/utility/delay

Answer 3

from(items)

将创建一个"冷可观察"，这意味着整个阵列将立即进行。如果您想在发送请求之前添加延迟(不要一次发送请求(，请尝试使用zip和间隔

import { interval, zip } from 'rxjs';
import { flatMap } from 'rxjs/operators';
const interval$ = interval(1000);
const requests$ = zip(from(items), interval$)
.pipe(
flatMap(([itmes]) => items),
mergeMap(item => ajax.getJSON(`https://api.github.com/users/${item}`))
)