Question

在我的应用程序中，我遇到了与combineLatest运算符有关的奇怪行为。我通过在线演示重现了此问题：

注意：请在本演示中忽略此业务逻辑，这不是很合理，我只想在技术层面重现此问题。

https://stackblitz.com/edit/angular-qcdslo?file=src/app/app.component.ts

  private testRequest() {
    this.pokemon$ = combineLatest(this.limit$, this.offset$)
      .pipe(
        map(data => ({limit: data[0], offset: data[1]})),
        switchMap(data => this.pokemonService.getPokemon(data.limit, data.offset)),
        map((response: {results: Pokemon[]}) => response.results),
      );
  }

此方法使用CombineLatest组合两个可观察值：limit $和offset $。并将请求发送到API，其中limit和offset的值仅是API的参数。

通过以下方法，我将计数器值每5秒增加1：

let counter = 1
setInterval(() => {
  this.offsetControl.setValue(counter)
  counter++;
}, 5000)

最后，由于某种原因，我还需要以下列方式每6s间隔调用一次testRequest方法：

setInterval(() => {
  this.testRequest();
}, 6000)

然后，网络请求行为如下：

limit=5&offset=0
limit=5&offset=1  
limit=5&offset=0
limit=5&offset=2 
limit=5&offset=0
limit=5&offset=3  
...
limit=5&offset=0
limit=5&offset=n

我不明白为什么limit=5&offset=0反复发生。谢谢。

Answer 1

每次执行testRequest时，您都在创建一个新的可观察对象，这不是您想要做的，每次重新创建该可观察对象时，您都会在调用startsWith时获得为零的startsWith值。

摆脱最新的合并，只需从表单控件中提取值即可。

https://stackblitz.com/edit/angular-droqf6?file=src/app/app.component.ts

rxjs：如何理解这种结合的最新行为

1 个答案: