Angular - повторение одного и того же HTTP-запроса на подписку

Question

Я создал компонент нумерации страниц, включающий кнопки «Предыдущая» и «Следующая» по обе стороны от номеров страниц.

Каждый раз, когда они нажимают кнопку в компоненте нумерации страниц (например, номер доступной страницы, следующий или предыдущий), я подписываюсь на функцию в моем сервисе, которая выполняет запрос GET к API.

Это работает, как и ожидалось, однако, если пользователь должен был спамить нажатие на любую из кнопок, он попадает в API несколько раз. Учитывая, что подписка на HTTP-запрос является асинхронной функцией, возвращаемые данные могут быть не самыми последними данными, запрошенными человеком.

Обычно, если пользователь нажимает кнопку 6 раз, но запрос 5 может занять больше времени для извлечения данных, чем запрос 6, поэтому, когда дело доходит до заполнения моего объекта, он перезаписывается данными запроса 5, что не идеально.

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

Каков наилучший способ справиться с этим?

Answer 1

Звучит так, как будто вам нужен switchMap() оператор rxjs.Поскольку вы не опубликовали никакого кода, я могу дать вам некоторый псевдокод для начала.

Сначала установите ссылку # для кнопок, которые выполняют следующую / обратную навигацию в разбивке на страницы.Как в

<button (click)="doPaginationStuff()" #backButton></button>

Затем, объявите свойство @ViewChild() в классе вашего компонента.Как и в

@ViewChild('backButton') buttonRef: ElementRef;

Затем, скажем, в методе ngOnInit () вы подпишетесь на события нажатия кнопки.Как и в

ngOnInit() {
  fromEvent(this.buttonRef.nativeElement, 'click')
     .pipe(switchMap(() => this.http.get('whatever page number'))
     .subscribe(console.log));
}

, он подписывается на нажатия кнопок.Как только он получает первое нажатие кнопки, он вызывает сервер, чтобы получить данные для номера страницы, переданного при нажатии кнопки.Однако, если пользователь продолжает нажимать кнопку до того, как запрос будет выполнен, предыдущий запрос будет отменен, и будет сделан новый запрос на номер страницы, переданный при последнем щелчке.Дайте мне знать, если это не то, что вы ищете.

Answer 2

Думаю, что-то подобное может решить вашу проблему:

1. назначить один и тот же класс каждой кнопке пейджинга.как page-btn

2. В вашем компоненте, прежде чем вызывать метод http, вы можете отключить каждую кнопку с классом выше. (вы можете сделать это с помощью углового ElementRef или другой класс.)

3. В методе подписки вы можете включить кнопки пейджинга.(Это означает, что после завершения http-запроса и обновления данных пользовательского интерфейса)

При таком подходе пользователи не могут нажимать какие-либо кнопки пейджинга, пока запрос данных находится на рассмотрении.