javascript - 在 Angular 6 和 Rxjs 6 中取消挂起的 HTTP 请求并再次触发 fromEvent

Question

我能够取消挂起的 HTTP 请求(使用 .unsubscribe)，但在此之后它不会触发我的 fromEvent(this.searchInput.nativeElement, 'keyup')。我该如何处理？

我正在使用“fromEvent(this.searchInput.nativeElement, 'keyup')”来获取搜索结果。但是，如果有一个待处理的 HTTP 请求并且用户清除了该字段，我想取消该请求(我尝试取消订阅并且它有效)。但是，此后“fromEvent”将不会触发。知道如何处理吗？

fromEvent(this.searchInput.nativeElement, 'keyup')
            .pipe(
                map((event: any) => {
                    if (event.keyCode === 17 || event.keyCode === 91 || event.keyCode === 37 || event.keyCode === 38 || event.keyCode === 39 || event.keyCode === 40 || event.keyCode === 13 || event.keyCode === 27) {
                        return;
                    }
                    return event.target.value;
                }),
                filter((query: any) => {
                    if (query === '') {
                        this.loading = false;
                        this.searchedResult = [];
                    }
                    return query && query.length > 0;
                }),
                debounceTime(300)
                ,distinctUntilChanged((p, c) => {
                    return !!this.searchedResult && this.searchedResult.length > 0 && (p == c);
                })
                , switchMap(query => {
                    query = query.trim();
                    this.loading = true;
                    return this.cartService.searchItemByName(encodeURIComponent(query), this.shopID.shop_id.toString()).pipe(
                        catchError(err => {
                            this.toaster.error(err.error.message || "Something went wrong!");
                            return of([]); //in case of error let’s emit an empty array
                        })
                    );
                })
            ).subscribe((res: any) => {
            let data = res.result;
            this.loading = false;
            this.searchedResult = data;
            if (data && data.length) this.setSelectedItem(data[0], 0)
        })

Answer 1

如果遇到新的搜索词，SwitchMap 已经取消订阅。因此，我会消除代码中的副作用，并不使用过滤器而是使用条件返回来处理空术语情况。

fromEvent(document.getElementById('source'), 'keyup')
    .pipe(
        map((event: any) => event.target.value),
        debounceTime(300),
        switchMap(query => {
            const trimmed = query.trim();
            this.loading = true;
            return trimmed === '' ? of([]) : fakeHttp(query);
        })
    )
    .subscribe((res: any) => {
        this.loading = false;
        console.log(res);
    });

实际操作:https://stackblitz.com/edit/rxjs-tg4gew?devtoolsheight=60