Angular9 可觀察對象用法實(shí)戰(zhàn)

輸入提示（type-ahead）建議

可觀察對象可以簡化輸入提示建議的實(shí)現(xiàn)方式。典型的輸入提示要完成一系列獨(dú)立的任務(wù)：

• 從輸入中監(jiān)聽數(shù)據(jù)。

• 移除輸入值前后的空白字符，并確認(rèn)它達(dá)到了最小長度。

• 防抖（這樣才能防止連續(xù)按鍵時(shí)每次按鍵都發(fā)起 API 請求，而應(yīng)該等到按鍵出現(xiàn)停頓時(shí)才發(fā)起）

• 如果輸入值沒有變化，則不要發(fā)起請求（比如按某個(gè)字符，然后快速按退格）。

• 如果已發(fā)出的 AJAX 請求的結(jié)果會因?yàn)楹罄m(xù)的修改而變得無效，那就取消它。

完全用 JavaScript 的傳統(tǒng)寫法實(shí)現(xiàn)這個(gè)功能可能需要大量的工作。使用可觀察對象，你可以使用這樣一個(gè) RxJS 操作符的簡單序列：

//Typeahead


import { fromEvent } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';




const searchBox = document.getElementById('search-box');


const typeahead = fromEvent(searchBox, 'input').pipe(
  map((e: KeyboardEvent) => (e.target as HTMLInputElement).value),
  filter(text => text.length > 2),
  debounceTime(10),
  distinctUntilChanged(),
  switchMap(() => ajax('/api/endpoint'))
);


typeahead.subscribe(data => {
 // Handle the data from the API
});

指數(shù)化退避

指數(shù)化退避是一種失敗后重試 API 的技巧，它會在每次連續(xù)的失敗之后讓重試時(shí)間逐漸變長，超過最大重試次數(shù)之后就會徹底放棄。 如果使用承諾和其它跟蹤 AJAX 調(diào)用的方法會非常復(fù)雜，而使用可觀察對象，這非常簡單：

//Exponential backoff


import { pipe, range, timer, zip } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { retryWhen, map, mergeMap } from 'rxjs/operators';


function backoff(maxTries, ms) {
 return pipe(
   retryWhen(attempts => zip(range(1, maxTries), attempts)
     .pipe(
       map(([i]) => i * i),
       mergeMap(i =>  timer(i * ms))
     )
   )
 );
}


ajax('/api/endpoint')
  .pipe(backoff(3, 250))
  .subscribe(data => handleData(data));


function handleData(data) {
  // ...
}