用于轮询的 Rxjs 导致多次重复的 api 调用

Question

这里的轮询意味着 - 在给定时间后定期进行 api 调用，即 refreshInterval 和更新数据。

我正在尝试应用轮询（即基于一些refreshInterval api 调用）但它重复的 api 调用并且连续进行 1000 个 api 调用并且响应也没有到来。

无论轮询时间如何，都会连续进行多个呼叫。 无论提供的轮询时间如何，它都会为每个 api 调用每秒订阅一次。

这里的错误是什么，或者这样做的正确方法是什么？

.ts

ngOnInit(){
// loop for demonstration
 for(let j = 0; j < 5; j++){
   makeApiCall(refreshInterval, url, params, payload) //<=== looping based on some json
 }

}

public makeApiCall(refreshInterval, url, params, payload){
interval(refreshInterval * 1000)
      .pipe(
        startWith(0),
        flatMap(() => this.serviceInvoker.invoke(url, params, payload)),
      ).subscribe(
        (success) => {
        },
        (err) => {

   }
  )
}

Answer 1

这里

public makeApiCall(refreshInterval, url, params, payload) {
    interval(refreshInterval * 1000)
//...

第一次调用makeApiCall是价值refreshInterval是0.这是的，当你试图做的东西与间隔0会发生什么stackblitz： https://stackblitz.com/edit/typescript-rrnu4d?file=index.ts

你需要timer ，而不是interval 。 更好的是，做一些类似的事情

interval(1000).pipe(
    take(5),
    flatMap(() => this.serviceInvoker.invoke( //...

Answer 2

HTTP 调用是异步的。 因此，您可能正在调用另一个 HTTP 调用，而前一个调用尚未完成。 每个浏览器对于每个主机（例如 Chrome - 6）的同时连接都有特定的阈值，高于该阈值所有 HTTP 请求将被搁置，直到先前的请求返回响应。 这就是为什么你没有得到任何回应。

您还说您需要在更新数据后重复调用。 目前，您在不知道请求是否已完成的情况下重复调用。

为此，您可以在每个回调中使用setTimeout()来解决方法而不是循环。 但要注意它带有严重的警告。 一旦调用，该函数将不断重复，除非它被clearTimeout(timeoutId)停止。

private timeoutId: any;

public makeApiCall(refreshInterval, url, params, payload) {
  this.serviceInvoker.invoke(url, params, payload).subscribe(
    (success) => {
      // handle success
      this.timeoutId = setTimeout(() => { this.makeApiCall(url, params, payload) }, refreshInterval * 1000);
    },
    (err) => { 
      // handle error 
      this.timeoutId = setTimeout(() => { this.makeApiCall(url, params, payload) }, refreshInterval * 1000);
    }
  );
}