Как сохранить последнее значение из наблюдаемого массива асинхронных каналов при ожидании обновления в Angular 11/Rxjs

Я перебираю массив объектов, полученный от службы с помощью «NgFor».

Сначала я обновил переменную массива объектов внутри метода подписки и понял две вещи.

this._myService.sendRequest(input).subscribe((value: SomethingInterface[]) => {
    this.objectArray = value.map((v) => new Something(v))
});

Во-первых: (преимущество) если я делаю новый запрос, старое значение сохраняется до тех пор, пока я не получу новое значение.

Во-вторых: (недостаток) если я делаю несколько запросов, они помещаются в очередь, и каждый запрос использует ненужную полосу пропускания.

Затем я перешел на асинхронный канал и понял еще две вещи.

this.objectArrayObservable = this._myService.sendRequest(value: SomethingInterface[]).pipe(
    map((value) => value.map((v) => new ChartDisplayDOM(v)))
);

Во-первых: (преимущество) Если я делаю несколько запросов, старые отменяются, и выполняется только последний запрос.

Второе: (недостаток) При ожидании завершения запроса массив пуст... и я не хочу делать полосу загрузки.

Есть ли способ воспользоваться обоими преимуществами?

Если я делаю новый запрос, старое значение сохраняется до тех пор, пока я не получу новое значение.

Если я делаю несколько запросов, старые отменяются, и выполняется только последний запрос.

Я попробовал некоторые комбинации операторов, такие как «combineLatest», с двумя разными Observables, но я не понял, как это решить.


angular rxjs rxjs-pipeable-operators
person Pedro Henrique S    schedule 13.05.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вместо создания новых цепочек для каждого действия пользователя создайте только одну цепочку, начинающуюся с экземпляра Subject:

s = new Subject();

...

s.pipe(
  switchMap(input => this._myService.sendRequest(input)),
).subscribe((value: SomethingInterface[]) => {
  this.objectArray = value.map((v) => new Something(v))
});

...
// User does some action...
s.next(input);

switchMap() позаботится о том, чтобы любой ожидающий запрос был отменен. Только не забудьте отписаться, когда компонент будет уничтожен.

person martin    schedule 13.05.2021
comment
Оно работает!! Более того, вы показываете мне способ улучшить мои звонки в службу поддержки. Большое спасибо. - person Pedro Henrique S; 14.05.2021