Angular請求防抖處理第一次請求失效問題
問題：
根據(jù)項目中的需求，需要設計一個下拉框，在輸入時根據(jù)內(nèi)容提供實時的建議，在此我們使用了如下組件，
<p-autoComplete [(ngModel)]="text" [suggestions]="results" (completeMethod)="search($event)"> </p-autoComplete>
因為我們需要根據(jù)輸入內(nèi)容實時的查詢后臺返回結果，如果每次更改都要傳給后臺的話，太耗費資源，而且對用戶也不友好，為此我們采用了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ā)送給服務。
但當我們使用的時候發(fā)現(xiàn)在初始化第一次請求的時,并不會調用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，同時還可以自行調用 next(value) 來產(chǎn)生值，在上面錯誤的代碼中，因為我們先調用的時next方法，這是雖然產(chǎn)生了值，但是還沒有進行訂閱，所以第一次的值并不會向后臺發(fā)起請求，而之后因為我們已經(jīng)訂閱了這個東西，所以第一次請求之后的請求都有效果。
結果方法：
在初始化的時候就進行訂閱，這樣在之后的查找我們只需要使用next傳值即可，我們已訂閱的對象就會自動觸發(fā)后臺請求。
總結：
寫功能的時候只是簡單的對代碼進行復制粘貼，并沒有真正的理解angular的觀察者的設計機制，通過這個錯誤加深了對angular觀察者的理解。
以上所述是小編給大家介紹的Angular請求防抖處理第一次請求失效問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了淺談Angular7 項目開發(fā)總結，本文在此做一次遇到問題的總結，以便知識的掌握，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了淺談Angular 觀察者模式理解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
ng-container 是 Angular 2+ 中可用的一個元素,可以作為結構指令的宿主,在本文中,您將探討可以使用 ng-container 解決的場景,文中有相關的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下2024-02-02
AngularJS 通過新的屬性和表達式擴展了 HTML。AngularJS 可以構建一個單一頁面應用程序（SPAs：Single Page Applications）。本文給大家介紹angularjs 的相關知識，感興趣的朋友一起看看吧2017-10-10
這篇文章主要給大家介紹了關于Angular 1.x個人使用的一些經(jīng)驗，屬于一些基礎入門教程，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
AngularJS ng-bind 指令簡單實現(xiàn)
本文主要介紹AngularJS ng-bind 指令,在這里對ng-bind 指令做了詳細資料整理并講解，提供了實例代碼以便大家參考，有需要的小伙伴可以參考下2016-07-07
這篇文章主要介紹了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人氣JavaScript庫,需要的朋友可以參考下2015-06-06
Angularjs實現(xiàn)數(shù)組隨機排序的方法
今天小編就為大家分享一篇Angularjs實現(xiàn)數(shù)組隨機排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了AngularJS 中ui-view傳參的實例詳解的相關資料,這里提供實例幫助大家學習理解這部分內(nèi)容，需要的朋友可以參考下2017-08-08
Angular應用里環(huán)境變量SERVER_REQUEST_ORIGIN含義解析
這篇文章主要為大家介紹了Angular應用里環(huán)境變量SERVER_REQUEST_ORIGIN的含義解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-10-10