多个顺序 AJAX 请求 RXJS答案

【问题标题】：Multiple sequential AJAX requests RXJS多个顺序 AJAX 请求 RXJS
【发布时间】：2020-05-03 19:32:46
【问题描述】：

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

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 示例。

Multiple AJAX request RXJS

【问题讨论】：

标签： javascript rxjs

【解决方案1】：

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

但首先，您需要在 observable 数组中的每个元素上使用 concatMap，以便为 items 数组中的每个元素创建一个具有延迟时间的新 observable。

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

我在here 上创建了一个新的演示。

【讨论】：

谢谢，但它仍然给了我可观察的回应。我需要实际的响应数据。

【解决方案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)
);

这里有类似的情况：

Delay for every element with RXJS

【讨论】：

【解决方案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}`))
)

【讨论】：