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

Question

我想使用 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");
                  });

根据 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"));
}

Answer 1

我想你想每隔几秒向服务器请求一些东西。你能试试这个吗

确保您已从 'rxjs/Rx' 导入 import {Observable} 如果您不导入它，我们有时会收到 observable not found 错误

工作计划http://plnkr.co/edit/vMvnQW?p=preview

import {Component} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Rx';

@Component({
    selector: 'app',
    template: `
      <b>Angular 2 HTTP request every 5 sec RxJs Observables!</b>
      <ul>
        <li *ngFor="let doctor of doctors">{{doctor.name}}</li>
      </ul>

      `
})

export class MyApp {
  private doctors = [];

  constructor(http: Http) {
    Observable.interval(5000)
    .switchMap(() => http.get('http://jsonplaceholder.typicode.com/users/')).map((data) => data.json())
        .subscribe((data) => {
          this.doctors=data; 
           console.log(data);// see console you get output every 5 sec
        });
  }
}

查看google检查控制台，您将每 5 秒获取一次新数据

Answer 2

我已经阅读了您在已删除答案中的评论。您想发送一个请求，然后在收到响应 10 秒后发送另一个请求。

这很复杂，但可行...我认为这样的事情应该可行：

let responseSubject = new Rx.BehaviourSubject({});
responseSubject
    .delay(10000)
    .flatMap(() => {
        return http.get(...)
    })
    .subscribe((res) => {
        responseSubject.onNext({});
        // Your stuff here
    });

我在这里设置了一个行为，这样我就可以在收到回复时进行反馈。然后设置一个流，在请求 10 秒后，它发出请求并产生响应。

编辑：我遗漏了一些东西...第一个请求需要 10 秒才能开始。然后我会改写为：

let responseSubject = new Rx.ReplaySubject(1);
responseSubject
    .delay(10000)
    .startWith({})
    .flatMap(() => {
        return http.get(...)
    })
    .subscribe((res) => {
        responseSubject.onNext({});
        // Your stuff here
    });

Answer 3

您的用例是 .expand 运算符的绝佳案例，它可以递归执行和 return 新值。看到这个片段，我在其中添加了很多时间戳 + 调试日志记录来阐明发生了什么。

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() 之前递归地扩展它的值 delay 一段时间。此方法不涉及任何主题，您的订阅仍可用于接收新值。

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

How to Request Async by interval using rxjs in Angular 2

rxjs

rxjs5

angular