Question

我目前有一个Observable计时器：

private poller(): Observable<PrepareData> {
    return Observable.timer(0, 5000).switchMap(() => this.http.get("/cgi/dashboard.php")).map(res => res.json());
}

我想拥有它，所以在最后一个完成后5秒完成获取请求。有什么简单的方法吗？

Answer 1

我会在@ Maxime的答案中添加我的答案，但实际上有 no need for a subject 。

这是使用.concat()运算符和getData()函数的递归完成的。

.concat()

通过顺序发出它们的值来连接多个Observable，一个Observable接着另一个。

（...）

concat将订阅第一个输入Observable并发出其所有值，而不以任何方式更改或影响它们。当Observable完成时，它将订阅然后传递下一个Observable，并再次发出其值。这将重复，直到操作员用尽Observables。当最后一个输入Observable完成时，concat也将完成。

（我使用了js版本来制作一个与Stack Overflow工具一起使用的代码片段，但这对于typescript来说是相同的）：

＆＃13;

function someHTTPCall() {
  // well it's a fake http call
  console.log("making the Http request (can take up to 5s)...");
  return Rx.Observable.of("http response !")
    .delay(Math.round(Math.random() * 5000));
}

function getData() {
  return someHTTPCall()
    .concat(Rx.Observable.timer(5000).switchMap(() => getData()));
}

let myObs = getData();

myObs.subscribe((data) => {
  console.log(data,"waiting for 5 seconds before next request");
});

＆＃13;

<script src="https://unpkg.com/rxjs@5.4.0/bundles/Rx.min.js"></script>

＆＃13;

Answer 2

这是一个有趣的问题，我有一些乐趣来提出解决方案。

此解决方案按预期等待上一个完成：

const { Observable, Subject } = Rx

const getFakeHttpRequest$ = () => Observable.of('response !').delay(3000)

const polling$ = new Subject()

Observable
  // need to tick the first time
  .of(null)
  // everytime our polling$ subject will emit, we'll do again what's next
  .merge(polling$)
  // register to a fake request
  .switchMap(_ =>
    getFakeHttpRequest$()
      .do(_ => {
        // once we're here, the request is done
        // no mater how long it was to get a response ...
        console.log('HTTP request done !');

        // ... we wait 5s and then send a new value to polling$ subject
        // in order to trigger a new request
        setTimeout(_ => polling$.next(null), 5000)
      })
  )
  .subscribe()

请注意，我已经对请求进行了3秒延迟，并且每8秒发生一次新请求，因为我们等待响应时间为3秒，然后根据您的问题请求5秒。

这是一个有效的普朗克：https://plnkr.co/edit/kXefUbPleqyyUOlfwGuO?p=info

Answer 3

你可以使用区间运算符：

private poller(): Observable<PrepareData> {
    return Observable.interval(5000).switchMap(() => this.http.get("/cgi/dashboard.php")).map(res => res.json());
}

Answer 4

在@ n00dl3的答案基础上，我创建了一个适用于网络的通用轮询方法，并查看该标签在触发另一个api请求之前是否可见。

function getPrice$() {
  return from(
      fetch(API_PRICE_MULTI_URL))
      .then((response) => {
          return response.json();
      })
  );
}

function poll$(pollObservableFactory, pollInterval) {
  return (document.hidden ? empty : pollObservableFactory)().pipe(
       concat(
            timer(pollInterval).pipe(
               switchMap(() => poll$(pollObservableFactory, pollInterval))
            )
       )
  );
}

// and test it like this
const sub=poll$(getPrice$, PRICE_POLL_INTERVAL).subscribe(console.log)

当用户切换到另一个窗口时，轮询将不会进行api调用。

可观察的民意调查？

4 个答案:

`.concat()`