Question

我正在创建一个typeahead，每当有人输入输入时远程调用api，输入后会有一点延迟。

此代码来自bootstrap 4 typeahead example docs (Wikipedia example)。使用所有.call和_do函数对我没用。

角度组件

import { map } from 'rxjs/operator/map';
import { debounceTime } from 'rxjs/operator/debounceTime';
import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged';
import { _catch } from 'rxjs/operator/catch';
import { _do } from 'rxjs/operator/do';
import { switchMap } from 'rxjs/operator/switchMap';

search = (text$: Observable<string>) =>
  _do.call(
     switchMap.call(
        _do.call(distinctUntilChanged.call(
           debounceTime.call(text$, 300)),
           () => this.searching = true),
           (term) => _catch.call(
              _do.call(this._service.search(term),
              () => this.searchFailed = false),
              () => {
              this.searchFailed = true;
              return of.call([]);
        })),
     () => this.searching = false);

HTML

      <md-input-container>
        <input mdInput [ngbTypeahead]="search"
           [(ngModel)]="model"
           [formControl]="lookupSubscriberControl"
           type="text"
           placeholder="Search by Name">
        <button type="submit" mdSuffix class="material-icons">search</button>
     </md-input-container>

1）这用英语做什么？现在我不明白如何以正常的方式阅读它，因此无法根据我的需要重写它。

2）有人可以帮助我以更易读的格式重写这个吗？比如使用链接序列的承诺，或任何其他更有意义的东西。

Answer 1

我同意这似乎有点折磨。我假设它已经完成，因为它们直接导入operators而不是使用add/变体来添加Observable原型的运算符。

基本上如果我们要改写它，因为我们传统上看到Observables它看起来像这样：

search = (text$: Observable<string>) =>
  text$.debounceTime(300)
   .distinctUntilChanged()
   .do(() => this.searching = true)
   .switchMap(term => 
     this._service.search(term)
       .do(() => this.searchFailed = false)
       .catch(() => {
         this.searchFailed = true;
         return Observable.of([]);
       })
   )
   .do(() => this.searching = false);

请注意，您还需要更改运算符的导入，以便将它们添加到Observable原型中：

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';

从根本上说，它所做的就是接收一个Obindable的搜索查询，它正在进行去抖动，因此请求不是用陈旧的数据进行的，然后它会删除重复的连续查询。然后它使用do块来应用一些副作用，这些副作用可能会在UI中反映出来。最后，它正在为处理搜索请求并返回结果数组的每个查询发出请求。如果出现问题，它会在返回空数据数组之前捕获失败并设置和错误状态。

重写可观察的序列以使其更有意义

1 个答案: