問(wèn)題：

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

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

因?yàn)槲覀冃枰鶕?jù)輸入內(nèi)容實(shí)時(shí)的查詢后臺(tái)返回結(jié)果，如果每次更改都要傳給后臺(tái)的話，太耗費(fèi)資源，而且對(duì)用戶也不友好，為此我們采用了angular的請(qǐng)求防抖做處理,代碼如下。

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) - 等待，直到用戶停止輸入（這個(gè)例子中是停止 1/2 秒）。

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

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

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

private searchText$ = new Subject<string>();packages$: Observable<InstrumentAlias[]>;ngOnInit() {// 創(chuàng)建可觀察著對(duì)象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$ 是一個(gè)序列，包含用戶輸入到搜索框中的所有值。 它定義成了 RxJS 的 Subject 對(duì)象，這表示它是一個(gè)多播 Observable，同時(shí)還可以自行調(diào)用 next(value) 來(lái)產(chǎn)生值，在上面錯(cuò)誤的代碼中，因?yàn)槲覀兿日{(diào)用的時(shí)next方法，這是雖然產(chǎn)生了值，但是還沒(méi)有進(jìn)行訂閱，所以第一次的值并不會(huì)向后臺(tái)發(fā)起請(qǐng)求，而之后因?yàn)槲覀円呀?jīng)訂閱了這個(gè)東西，所以第一次請(qǐng)求之后的請(qǐng)求都有效果。

結(jié)果方法：

在初始化的時(shí)候就進(jìn)行訂閱，這樣在之后的查找我們只需要使用next傳值即可，我們已訂閱的對(duì)象就會(huì)自動(dòng)觸發(fā)后臺(tái)請(qǐng)求。

總結(jié)：

寫功能的時(shí)候只是簡(jiǎn)單的對(duì)代碼進(jìn)行復(fù)制粘貼，并沒(méi)有真正的理解angular的觀察者的設(shè)計(jì)機(jī)制，通過(guò)這個(gè)錯(cuò)誤加深了對(duì)angular觀察者的理解。

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