无法使debounceTime()或油门时间()对Angular http请求起作用 [英] Can't make debounceTime() or throttleTime() to work on an Angular http request

问题描述

对于我的一生，我无法完成这项工作. 我进行了搜索，但是找不到任何示例(所有示例均带有.fromEvent()，而没有任何示例位于http.get上).

For the life of me, I can not make this work. I've searched and searched, but I couldn't find any example (all examples out there are with .fromEvent(), none on a http.get).

在我的模板中，我输入以下内容:

In my template, I have this input:

<input type="text" (input)="categoriesSearch($event)">

在我的组件中，我具有以下内容:

In my component, I have the following:

categoriesSearch(event) {
    this.categoriesSubscription = this.apiService
        .getCategoriesList(this.uploadForm.get('categories').value)
        .debounceTime(3000)
        // .throttleTime(3000)
        .subscribe(
            (response) => {
                this.categories = response.data;
            }
        );
}

这是我的ApiService中的方法:

And this is the method in my ApiService:

getCategoriesList(keyword = null) {
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Bearer', this.authService.user.token);

    const getParams: URLSearchParams = new URLSearchParams();
    getParams.set('keyword', keyword);
    return this.http.get(this.apiHost + '/categories', { headers: headers, search: getParams })
        .map(response => response.json());
}

在categoriesSearch()方法中，我尝试了debounceTime()和throttleTime()(我也导入了它们，当然是import 'rxjs/add/operator/debounceTime'，import 'rxjs/add/operator/throttleTime').

In the categoriesSearch() method, I've tried both debounceTime() and throttleTime() (I also imported them, of course import 'rxjs/add/operator/debounceTime', import 'rxjs/add/operator/throttleTime').

但是http.get请求完全不会被反跳或限制！如果我在3秒钟内键入10个字符，则会发出10个http请求.

But the http.get request is not debounced or throttled at all! If I type 10 characters in 3 seconds, it makes 10 http requests.

到底该如何通知this.http.get仅在自上一个请求或无请求"以来至少3秒钟过去了(即最初的3秒钟延迟)之后才发出请求?好的，也许在这里我应该说自从我最后一次在输入中输入了内容".

How on earth do I tell this.http.get to only make a request if at least 3 seconds have passed since the previous request or since 'no request' (meaning an initial 3 seconds delay)? Ok, maybe here I should say "since I've last typed something in my input".

我还尝试过在.map()运算符之前直接在服务中使用debounceTime()/throttleTime()-但结果是相同的.

I've also tried using debounceTime()/throttleTime() in the service directly, before the .map() operator - but the result is the same.

推荐答案

但是http.get请求完全不会被反跳或限制！如果我 在3秒钟内输入10个字符，它将发出10个http请求.

But the http.get request is not debounced or throttled at all! If I type 10 characters in 3 seconds, it makes 10 http requests.

您的实施方式有误.您需要先捕获输入，应用谴责并执行HTTP请求.

your implementing in a wrong way. you need capture input first, apply denounce and do HTTP request.

您可以通过多种方式实现

you can implement in several ways

1)Observable.fromEvent

 <input type="text" #input>

组件

 @ViewChild('input') text: ElementRef;

  ngAfterViewInit() {
    let text$ = Observable.fromEvent(this.text.nativeElement, 'keyup')
     .do(() => console.log("keyup"))
    .debounceTime(3000)
     .distinctUntilChanged()
    .switchMap(() => getCategoriesList())
        .subscribe(res => console.log(res));
  }

2)使用主题

<input type="text" (keyup)="search($event)">

组件

  searchTerms = new Subject<string>();

search(term: string): void {
    this.searchTerms.next(term);
  }

ngOnInit(): void {

    this.searchTerms
      .debounceTime(3000)
      .distinctUntilChanged()
      .switchMap(() => getCategoriesList())
      .subscribe(term => { 
       console.log();
     });

3)使用表单控件

 <input type="text" [formControl]="term">

组件

  term = new FormControl();

  ngOnInit() {
    this.items = this.term.valueChanges
                 .debounceTime(3000)
                 .distinctUntilChanged()
                 .switchMap(term => getCategoriesList(term))
                 .subscribe(res => console.log(res));
  }

这篇关于无法使debounceTime()或油门时间()对Angular http请求起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！