Angular 8：如何使用 Observable 的时间间隔立即发送 http 请求

Question

我具有将请求从前端连续发送到后端的功能。所以我添加了如下代码。

我想以第一个请求立即发出然后在两分钟后发出的方式实施。

但使用下面的代码并根据间隔的定义，它将在两分钟后发送第一个请求。

this.getData = Observable.interval(2 * 60 * 1000)
      .pipe(flatMap(() => this.service.getData(b, b, b, b, b, b))).subscribe();

我不想通过先添加请求然后添加上述代码来重复代码，也不想通过任何其他方式来完成它。

Answer 1

解决这个问题最简单的方法是使用timer操作符而不是interval初始延迟为 0 秒的操作符。

this.getData = Observable.timer(0, 2 * 60 * 1000)
      .pipe(flatMap(() => this.service.getData(b, b, b, b, b, b))).subscribe();

更新：使用repeat和delayWhen运算符

上述解决方案对于简单的用例很有用。但是，如果您需要动态控制每个请求之间的延迟并根据某些条件完成轮询，则可以使用repeat,delayWhen和takeWhile运算符。

let condition = 0;
this.service.getData(b, b, b, b, b, b).pipe(
  take(1),
  delayWhen(_ => condition === 0 ? timer(0) : timer(2 * 60 * 1000)),   // set poll delay
  repeat(),
  takeWhile(_ => condition < 5),        // stop polling when `condition` is 5
  switchMap(response => {
    // do something and update the `condition`
    condition++;
    return of(response);
  })
).subscribe(
  res => console.log(res),
  err => console.log(err),
  () => console.log('complete')
);

您还可以使用运算符对何时重复请求repeatWhen进行更精细的控制。