0

我創建了一個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)有人能幫我改寫這個更具可讀性的格式嗎?比如使用承諾的鏈式序列,或者其他更有意義的東西。

回答

3

我同意,似乎確實有點折磨。我假設這是因爲他們直接導入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); 

注意,你也需要改變運營商的進口也使他們獲得加入觀察到的原型:

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

從根本上所有正在接收時可觀察到的,它是反跳,使請求不與陳舊的數據來進行,則刪除重複的連續查詢的搜索查詢。然後它使用do塊來應用一些可能會反映在UI中的副作用。最後,它會爲處理搜索請求並返回結果數組的每個查詢發出請求。如果某些事情出錯,它會在返回空數組數據之前捕獲故障並設置錯誤狀態。

+0

美麗!謝謝,那正是我所期待的。 – TetraDev