在服务Angular 2

时间:2016-11-18 02:43:17

标签: javascript angular debouncing

我有一个简单的RXJS去抖动搜索方法

像这样。

this.searchTerm.valueChanges
      .debounceTime(this._debounceDelay, this._scheduler)
      .distinctUntilChanged()
      .filter(this.filterForBlank.bind(this))
      .filter(this.filterForLength.bind(this))
      .switchMap(term => this.searchService.serchBy(term))
      .subscribe((data) => {
       // do something
      }, (err) => {
           // show error on UI
      });




private filterForLength(term: string) {
    return (term.trim().length > 2);
  }

  private filterForBlank(term: string) {
    if (isEmpty(term)) {
                return false;
    }
    return true;
  }

但是如果出现错误,例如,我将URL更改为错误的...此更改功能未再次发生。即使在更改值

之后

我认为如果出现错误,我需要杀死observable。但完全不知道如何实现这一目标。

1 个答案:

答案 0 :(得分:0)

你的解释几乎是正确的。如果你在没有发现错误的情况下发出可观察到的错误,那么它可能已经不再适用了。你需要做的是使用catch操作符来捕获错误并处理它以便在没有“杀死”的情况下失败。可观察的。

这可能是这样的:

this.searchTerm.valueChanges
  .debounceTime(this._debounceDelay, this._scheduler)
  .distinctUntilChanged()
  .filter(this.filterForBlank.bind(this))
  .filter(this.filterForLength.bind(this))
  .switchMap(term => this.searchService.serchBy(term))
  .catch(errors => {
     return Rx.Observable.empty();
  });
  .subscribe((data) => {
   // do something
  });

现在,如果您的后端调用失败,它将由catch子句优雅地处理并返回一个新的空值。您可以使用此空值清除您在成功时显示的任何数据。如果它有效,它将跳过catch子句。

编辑: 你纠正了。这不行。由于这一事实,如果一个可观察的链条出错,整个链条就会被打破。要修复它,您需要这样做:

this.searchTerm.valueChanges
  .debounceTime(this._debounceDelay, this._scheduler)
  .distinctUntilChanged()
  .filter(this.filterForBlank.bind(this))
  .filter(this.filterForLength.bind(this))
  .switchMap(term => 
               this.searchService.serchBy(term)
                   .catch(errors => {
                            // show error on ui
                            return Rx.Observable.empty()
                   }))
  .subscribe((data) => {
   // do something
  });

通过在switchMap中移动catch语句,switchMap中的可观察链将会破坏。然而,原始链是从' this.searchTerm.valueChanges'不会破裂并保持活力。

我为错误的答案道歉。