Angular - отменить предыдущие поисковые запросы и оставить только последние

Question

У меня есть HTTP-запрос

searchService() {
    return this.httpClient.get(URL);
}

И я подписываюсь вот так

search() {
   this.service.searchService().subscribe((data) => { });
}

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

Итак, я хочу отменить все предыдущие подписки и сохранить только последний поиск

Answer 1

Вам нужно будет использовать несколько операторов rxjs, а именно debounceTime, distinctUntilChanged и switchMap, чтобы убедиться, что вы не отправляете слишком много вызовов API и что вы получаете только результаты из последнего запроса.

Проверьте эту статью для подробного примера:
https://alligator.io/angular/real-time-search-angular-rxjs/

Answer 2

Используйте debounceTime для достижения этого

debounceTime
подпись: debounceTime (dueTime: число, планировщик: планировщик): Наблюдаемый

Пример

// RxJS v6+
import { debounceTime} from 'rxjs/operators';
// ...
search() {
   this.service.searchService().pipe(debounceTime(500)).subscribe((data) => { });
}