Отменить предыдущий бэкэнд-запрос, если создан новый - PullRequest
Новая
       21

Отменить предыдущий бэкэнд-запрос, если создан новый

0 голосов
/ 17 ноября 2018

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

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

После этого я передаю компоненту mat-option наблюдаемый список городов 

searchCities = (value: string): Observable<City[]> => {
    if(value.length >= this.minCityNameLength){
      return this.detailsITService.fetchCitiesByName(value);
    }

    return of([]);
};

Есть ли способ "отменить" запрос, если метод searchCities (переданный в качестве входного параметра моему пользовательскому компоненту) вызывается с новым пользовательским вводом?

1 Ответ

0 голосов
/ 17 ноября 2018

Typeahead - довольно распространенная проблема, и rxjs - замечательный инструмент для решения этой проблемы.Давайте предположим, что input$ является наблюдаемой, испускающей строку поиска, введенную пользователем, вы можете сделать это следующим образом: 

input$.pipe(
  // This is optional, just a suggestion. It prevents a
  // request from being started while the user is still
  // quickly typing a word. The value is a time in ms, see
  // the operators docs for details.
  debounceTime(250),

  // Here's the actual piece of code: switchMap will
  // start a new inner subscription whenever a new search
  // input comes along, cancelling any still on-going previous
  // request. This avoids any race conditions.
  switchMap(input => input.length > this.minCityNameLength
    ? this.detailsITService.fetchCitiesByName(input)
    : of([])
  )
).subscribe(…);

Способ, которым вы устанавливаете поток input$, будет, например, с 

<input type="text" (input)="input$.next($event.target.value)" />

, где input$ определяется как 

public input$ = new Subject<string>();

Рабочий пример можно найти здесь .Вы также можете увидеть эффект debounceTime, если открыть консоль и попробовать ее с оператором и без оператора.

...