快捷導(dǎo)航

Angular請求防抖處理第一次請求失效問題

更新時間：2019年05月17日 12:05:28 作者：zhuchenshu

這篇文章主要介紹了angular請求防抖及處理第一次請求失效的相關(guān)資料,需要的朋友可以參考下

問題：

根據(jù)項目中的需求，需要設(shè)計一個下拉框，在輸入時根據(jù)內(nèi)容提供實時的建議，在此我們使用了如下組件，

<p-autoComplete [(ngModel)]="text" [suggestions]="results" 
(completeMethod)="search($event)">
</p-autoComplete>

因為我們需要根據(jù)輸入內(nèi)容實時的查詢后臺返回結(jié)果，如果每次更改都要傳給后臺的話，太耗費資源，而且對用戶也不友好，為此我們采用了angular的請求防抖做處理,代碼如下。

packages$: Observable<NpmPackageInfo[]>;
private searchText$ = new Subject<string>();

search(packageName: string) {
 this.searchText$.next(packageName);
}
ngOnInit() {
 this.packages$ = this.searchText$.pipe(
 debounceTime(500),
 distinctUntilChanged(),
 switchMap(packageName =>
  this.searchService.search(packageName, this.withRefresh))
 );
}

作用如下：

debounceTime(500) - 等待，直到用戶停止輸入（這個例子中是停止 1/2 秒）。

distinctUntilChanged() - 等待，直到搜索內(nèi)容發(fā)生了變化。

switchMap() - 把搜索請求發(fā)送給服務(wù)。

但當我們使用的時候發(fā)現(xiàn)在初始化第一次請求的時,并不會調(diào)用service的方法，錯誤代碼如下：

private searchText$ = new Subject<string>();
packages$: Observable<InstrumentAlias[]>;
ngOnInit() {
// 創(chuàng)建可觀察著對象
this.packages$ = this.searchText$.pipe(
   debounceTime(500),
   distinctUntilChanged(),
   switchMap(packageName =>
    this.instrumentAliasService.queryInstrumentAliasByName(packageName))
  );
}
this.searchText$.next(this.queryName);
this.packages$.subscribe((instrumentAliases: Array<InstrumentAlias>) => {
 this.filteredinstrumentAlias = instrumentAliases;
}, () => {
 console.log('get instrumentAliases error');
});

searchText$ 是一個序列，包含用戶輸入到搜索框中的所有值。它定義成了 RxJS 的 Subject 對象，這表示它是一個多播 Observable，同時還可以自行調(diào)用 next(value) 來產(chǎn)生值，在上面錯誤的代碼中，因為我們先調(diào)用的時next方法，這是雖然產(chǎn)生了值，但是還沒有進行訂閱，所以第一次的值并不會向后臺發(fā)起請求，而之后因為我們已經(jīng)訂閱了這個東西，所以第一次請求之后的請求都有效果。

結(jié)果方法：

在初始化的時候就進行訂閱，這樣在之后的查找我們只需要使用next傳值即可，我們已訂閱的對象就會自動觸發(fā)后臺請求。

總結(jié)：

寫功能的時候只是簡單的對代碼進行復(fù)制粘貼，并沒有真正的理解angular的觀察者的設(shè)計機制，通過這個錯誤加深了對angular觀察者的理解。

以上所述是小編給大家介紹的Angular請求防抖處理第一次請求失效問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: