如何使用Angular 2中的rxjs按间隔请求异步

发布时间：2020-12-17 17:02:29 所属栏目：安全来源：网络整理

导读：我想使用rxjs在http请求中设置间隔.我需要在请求完成后n秒内在服务器上发送数据. Observable.interval(10000) .?(() = { //request for server. return Observable return this.getData(); }) .subscribe(() = { console.log("Request done. After 10 second

我想使用rxjs在http请求中设置间隔.我需要在请求完成后n秒内在服务器上发送数据.

Observable.interval(10000)
                  .?(() => {
                      //request for server. return Observable
                      return this.getData();
                  })
                  .subscribe(() => {
                      console.log("Request done. After 10 second will be next request");
                  });

UPDATE基于Mark建议的.expand()

ngOnInit() {
  this.getData()
    .expand(() => Rx.Observable.timer(10 * 1000)
      .concatMap(() => this.getData())
    )
    .subscribe(data => {
      console.log('received new data',data);
    });
}

private getData() {
  return Observable.timer(5000)
    .do(() => console.log("timer"));
}

解决方法

您的usecase是.expand运算符的一个很好的例子,它可以递归地执行和返回新值.请参阅此片段,其中我添加了大量时间戳调试日志记录以阐明正在进行的操作.

function getData() {
  // simulate remote call which can take some time
  return Rx.Observable.of('')
    .timestamp()
    .do(i => console.log(`[debug] Going to fetch data from server @${i.timestamp}`))
    .map(i => 'the new JSON blob of data to use') // this would be your actual http.get call
    .delay(1500)
    .timestamp()
    .do(i => console.log(`[debug] Data retreived from server @${i.timestamp}`));
}

getData()
  .expand(_ => Rx.Observable.of('') // we need something to delay upon
    .timestamp()
    .do(i => console.log(`[debug] Waiting 1sec for next getData ${i.timestamp}`))
    .delay(1000)
    .concatMap(() => getData())
  )
  .take(5)
  .subscribe(val => console.log(`New data received @${val.timestamp} : ${val.value}`))

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.3/Rx.js"></script>

所以最初你订阅了getData()并扩展它的值,以便在检索下一个getData()之前递归延迟一段时间.此方法不涉及任何主题,您的订阅仍可用于接收新值.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!