Angular & rxjs: проблема автозаполнения гонки

Question

У меня есть этот код для возврата данных из моего API:

private searchTerm = new Subject<string>();
public termsArray: any = [];

constructor(private apiService: DataService){
                    this.searchTerm
                    .debounceTime(200)
                    .distinctUntilChanged()
                    .subscribe(
                        term => {
                            let data = (this.apiService.getSearchTest(term))
                            if (data) {
                                data.pipe(
                                            takeUntil(this.searchTerm.pipe(skip(1)))
                                        )
                                    .subscribe(response => {
                                    this.termsArray = response.suggestions as Array<any>;
                                    console.log(this.termsArray); //just debug
                                }, err => {
                                    console.log(err);

                                });
                            }

                        });
}

autocompleteTest = (text$: Observable<string>) =>
    text$.pipe(
        debounceTime(300),
        distinctUntilChanged(),
        map(term => term.length < 1 ? []
            : this.termsArray
                .filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)
                .slice(0, 10))
        )

onKeyUpSearch(searchText: string){
    if (searchText !== "") this.searchTerm.next(searchText);
}

Итак, вызовы api отлично работают и также преобразуются в массив.Я прикрепил typeahed к autocompleteTest, и он работает, но с условием гонки ... после нескольких исследований кто-то только что сказал, что вам следует заменить функцию map в autocompleteTest на switchMap для ожидания данных.

Как мне правильно сделать это с switchMap, чтобы избежать состояния гонки?

Answer 1

Просто сделайте так:

this.searchTerm.pipe(
    debounceTime(200)
    distinctUntilChanged()
    switchMap(term => {
        let data = (this.apiService.getSearchTest(term));
        if (!data) { return of(null); }
        return data.pipe(
            takeUntil(this.searchTerm.pipe(skip(1)))
        );
    })
).subscribe(response => {
    this.termsArray = (response) ? response.suggestions as Array<any>: []; 
    console.log(this.termsArray); //just debug
}, err => {
    console.log(err);
});

Я добавил возврат of(null), потому что вы всегда должны возвращать наблюдаемое внутри оператора switchMap.В противном случае вы получите:

TypeError: вы указали «undefined» там, где ожидался поток.Вы можете предоставить Observable, Promise, Array или Iterable