在 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

takeUntil 可以在這里完成這項工作：

 searchInputEvent = new Subject(); fromEvent(this.searchInput.nativeElement, 'keyup') .pipe( tap(() => this.searchInputEvent.next()), 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( takeUntil(this.searchInputEvent), 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) })

它將從之前訂閱的searchItemByName observable 中取消訂閱 keyup 事件被觸發的每種類型。 您可以考慮在用戶輸入后立即取消請求，或者僅在去抖時間結束時取消請求。 在這種情況下，將水龍頭放在 debounceTime 之后

Answer 2

如果遇到新的搜索詞，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