Как прервать выполнение запроса?

Question

[Sergei Abramov]

Использую ng-select, по примеру из доки (Демо, нижний пример), сделал поиск через бэкенд:

private loadCountry() {
        this.countryList$ = concat(
            of([]), // default items
            this.countryInput$.pipe(
                debounceTime(this.debounceTime),
                distinctUntilChanged(),
                tap(() => this.countryLoading = true),
                switchMap(search => {
                    return this.locationService.getCountry(search).pipe(
                        catchError(() => of([])),  // empty list on error
                        tap(() => this.countryLoading = false)
                    ).toPromise().then(data => {
                        const countries = [];
                        const cnt = data.body.length;
                        for (let i = 0; i < cnt; i++) {
                            countries.push(new Country(data.body[i]));
                        }
                        return countries;
                    });
                }),
            )
        );
    }

Но есть проблема: после того, как пользователь в селекте выберет нужный пункт, то этот метод сработает еще раз, но с search = null. Вот как этого избежать? Как правильно прервать выполнение этого метода при search = null?

Сделал так, но мне кажется, что это технически не верно, и есть более верные решения.

private loadCountry() {
        this.countryList$ = concat(
            of([]), // default items
            this.countryInput$.pipe(
                debounceTime(this.debounceTime),
                distinctUntilChanged(),
                tap(() => this.countryLoading = true),
                switchMap(search => {
                    
                    if (!search) {this.countryLoading = false; return []; }  // Мое решение
                    
                    return this.locationService.getCountry(search).pipe(
                        catchError(() => of([])), // empty list on error
                        tap(() => this.countryLoading = false)
                    ).toPromise().then(data => {
                        const countries = [];
                        const cnt = data.body.length;
                        for (let i = 0; i < cnt; i++) {
                            countries.push(new Country(data.body[i]));
                        }
                        return countries;
                    });
                }),
            )
        );
    }

Answer 1

[Дмитрий Терентьев]

В pipe заюзай оператор filter rxjs и отфильтруй значения с null.

https://www.learnrxjs.io/operators/filtering/filte...

Comments

[Sergei Abramov]

Получилось. Спасибо!

Answer 2

[Антон Швец]

А в примере входной параметр [minTermLength]="2" вам ни о чем не говорит?
и уберите промис, кошмар же

Comments

[Sergei Abramov]

Конечно, этот параметр у меня присутствует, но он работает только при вводе пользователем. После ввода, если пользователь кликает мышью или ентерем выбирает нужный пункт, то функция срабатывает с search = null. Возможно надо на это багрепорт сделать в библиотеке.
И без промиса как реализовывать? Через subscribe не получилось: ругается на возвращаемый тип
<Observable<HttpResponse<Country[]>>
а ожидает <Observable<Country[]>

[Антон Швец]

Sergei Abramov,

map(({ body }) => body.map(country => new Country(country)))

после switchMap

[Sergei Abramov]

Спасибо, так гораздо лучше :)