Angular 2使用Observable.debounce（）和Http.get

我知道

Observable.debounce（）

可用于处理快速射击表单输入。由于HTTPGET还返回一个可观察的，我想知道是否有可能消除快速Http请求的影响？我尝试了

去BounceTime（）

，但似乎没有任何效果

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

公共getStuff（p1，区域：string，p2:string）：可观察的{ 返回此.http.get（some\u url） .map（r=>r.json（）） .debounceTime（10000） .接住（这个.把手错误）； };

---

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

它在输入上下文中很有用，但应该在触发事件的可观察对象上定义，而不是在为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;
               });
  }
}

@组件({
(...)
模板：`
`
})
导出类MyComponent{
构造函数（）{
this.ctrl=新控件（）；
这个.ctrl.valueChanges
.debounceTime（500）
.distinctUntilChanged（）
.switchMap（（值：字符串）=>{
//根据填充值获取数据
返回此.service.getData（条目）；
})
.订阅（数据=>{
//更新链接列表
this.list=数据；
});
}
}

这篇文章也会引起您的兴趣：

• （参见“与用户事件链接”一节）

在micronyks的评论之后，这里有一个额外的链接：

• 一切都是一条流：（youtube:）

---

您必须使用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();
}

observeObj$：可观察；
subjectObj=新主题（）；
恩戈尼尼特（）{
this.observeObj$=this.subjectObj.pipe(
去BounceTime（1000），
开关映射（（）=>{
...
返回这个.http.get（some_url）.map（r=>r.json（））；
}),
);
此.observeOBJ$.subscribe（（数据）=>{
//http获取的结果。。。
...
});
}
getStuff（）{
this.subjectObj.next（）；
}

在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)
   );
};

从'rxjs'导入{Observable，of，timer}；
从'rxjs/operators'导入{catchError，retry，map，debounce}；
公共getStuff（p1，区域：string，p2:string）：可观察的{
返回此.http.get（some\u url）
.烟斗(
去抖动（（）=>定时器（10000）），
catchError（this.handleError）
);
};

请添加一些代码来演示您试图完成的任务。public getStuff（p1，area:string，p2:string）：可观察的{返回this.http.get（

some_url

）.map（r=>r.json（））.debounceTime（10000）.catch（this.handleError）；}；请编辑您的问题并在此处添加代码。注释中的代码很难阅读。

edit

链接位于问题下方的

angular2 observable

标记下方。对不起，我没有想到用格式良好的代码示例更新问题。它现在就在那里。非常感谢你的现代版！我试过了，但这对我不起作用