angular6學習筆記18:請求防抖
阿新 • • 發佈:2018-12-07
根據使用者鍵盤對的輸入,向遠端伺服器傳送請求並返回資料,即:常見的搜尋功能
<input type="text" #searchSource placeholder="請輸入搜尋的內容"(keyup)='search(searchSource.value)'>
在搜尋時:input控制元件的(keyup)
事件繫結把每次擊鍵都發送給了元件的 search()
方法。
如果每次擊鍵都發送一次請求就太昂貴了。 最好是能等到使用者停止輸入時才傳送請求。此時就可以用到請求防抖(使用 RxJS 的操作符實現)。
1. 引入相關的包
import {Subject} from 'rxjs/Subject';
2.宣告變數
private searchTerms = new Subject<string>();
3.serach方法
search(serachParam: string) {
this.searchTerms.next(serachParam);
}
4.請求防抖
ngOnInit(): void { this.searchTerms .pipe( // 請求防抖 300毫秒 debounceTime(300), distinctUntilChanged()) .subscribe(term => { // 此處進行httpClient的請求 // term是使用者輸入的值 }); }
searchTerms 是一個序列,包含使用者輸入到搜尋框中的所有值。 它定義成了 RxJS 的 Subject
物件,這表示它是一個多播 Observable
,同時還可以自行呼叫 next(value)
來產生值,除了把每個 searchText
的值都直接轉發給 httpClient
之外
ngOnInit()
中的程式碼還通過下列兩個操作符對這些搜尋值進行管道處理:
-
debounceTime(300)
- 等待,直到使用者停止輸入(這個例子中是停止 300ms)。 -
distinctUntilChanged()
- 等待,直到搜尋內容發生了變化。
這樣,只有當用戶停止了輸入且搜尋值和以前不一樣的時候,搜尋值才會傳給服務,傳送請求。