rxjs: как понять это комбатластное поведение - PullRequest
Новая
       29

rxjs: как понять это комбатластное поведение

1 голос
/ 03 июля 2019

В моем приложении я обнаружил странное поведение, связанное с оператором 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),
      );
  }

этот метод использует объединение последних для объединения двух наблюдаемых: предела $ и смещения $.И отправил запрос в API, где значения limit и offset являются просто параметрами для API.

И я увеличиваю значение счетчика на 1 каждые 5 секунд в следующих методах: 

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

Наконец, по какой-то причине мне нужно вызывать метод testRequest для каждого интервала 6 секунд какхорошо следующим образом: 

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 происходило неоднократно.Спасибо.

1 Ответ

0 голосов
/ 03 июля 2019

Каждый раз, когда testRequest выполняет, вы создаете новую наблюдаемую информацию, это не то, что вы хотите делать, каждый раз, когда вы воссоздаете наблюдаемую, вы получаете значение startWith, которое было нулевым, когда вы вызывали startWith.

Избавьтесь откомбайн последний и просто извлекает значения из элементов управления формы.

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

...