Question

我了解Observable.debounce()可用于处理 快速火 表单输入。由于Http GET也返回一个Observable，我想它有可能去掉快速的http请求吗？我尝试了 debounceTime() ，但它似乎没有做任何事情。

public getStuff(p1, area:string, p2:string): Observable<number> { 
   return this.http.get(some_url) 
   .map(r => r.json()) 
   .debounceTime(10000) 
  .catch(this.handleError); 
};

Answer 1

debounceTime允许缓冲事件，并且只在一段时间后处理最后一个事件。

它在输入的上下文中很有用，但它应该在observable上定义，触发事件而不是为HTTP请求创建的事件。

以下是与利用debounceTime运算符的输入关联的控件的示例：

@Component({
  (...)
  template: `
    <input [ngFormControl]="ctrl"/>
  `
})
export class MyComponent {
  constructor() {
    this.ctrl = new Control();
    this.ctrl.valueChanges
               .debounceTime(500)
               .distinctUntilChanged()
               .switchMap((value: string) => {
                 // Get data according to the filled value
                 return this.service.getData(entry);
               })
               .subscribe(data => {
                 // Update the linked list
                 this.list = data;
               });
  }
}

本文也可能对您感兴趣：

https://jaxenter.com/reactive-programming-http-and-angular-2-124560.html（请参阅“与用户事件关联”）

根据micryks的评论，这是一个额外的链接：

一切都是一个流：http://slides.com/robwormald/everything-is-a-stream（youtube：https://www.youtube.com/watch?v=UHI0AzD_WfY）

Answer 2

在Angular7中：

import { Observable, of, timer } from 'rxjs';
import { catchError, retry, map, debounce } from 'rxjs/operators';

public getStuff(p1, area:string, p2:string): Observable<number> { 
   return this.http.get(some_url) 
   .pipe(
      debounce(() => timer(10000)),
      catchError(this.handleError)
   );
};

Answer 3

您必须使用switchMap将subject observable转换为http observable，如下所示：

observableObj$: Observable<any>;
subjectObj = new Subject();

 ngOnInit() {
    this.observableObj$ = this.subjectObj.pipe(
      debounceTime(1000),
      switchMap(() => {
        ...
        return this.http.get(some_url).map(r => r.json());
      }),
    );

    this.observableObj$.subscribe((data) => {
      // result of http get...
      ...
    });
}

getStuff() {
    this.subjectObj.next();
}

Angular 2使用带有Http.get的Observable.debounce（）

3 个答案: