RxJS: map, flatMap和flatMapLatest的區別

在這篇文章中我會對map,flatMap和flatMapLatest三個操做符進行比較，下面咱們來舉個例子。

let stream = Observable.interval(1000).take(10);
return stream.map(n => n * 2);

上面的代碼模擬了異步行爲，每隔1s發射一個數字。這個例子很簡單，你會隨着時間推移獲得一連串的數字。

咱們再來看另外一個例子。

let stream = Observable.interval(1000).take(10);
return stream.map(n => Observable.timer(500).map(() => n));

這裏stream會返回一個Observable而不是數字。

若是我想要拿到那些數字，我該怎麼辦？

let stream = Observable.interval(1000).take(10);
return stream.flatMap(n => Observable.timer(500).map(() => n));

這裏使用了flatMap而不是map。flatMap將響應數據「打平」，也就是說把映射後新的Observable轉化爲了數據流，訂閱以後會得到這個新Observable發射的數據，而不是Observable自己。

譯者注：flatMap有一個很適用的場景，就是搜索框。在用戶輸入一串字符後，將其發送到服務器並獲取搜索結果，這裏就涉及到兩個Observable。

Observable
.fromEvent($input, 'keyup')
.flatMap(text => getHttpResponse(text))
.subscribe(data => console.log(data))

使用flatMap就能夠直接獲取到新的Observable返回的數據。可是這裏存在一個問題，若是用戶有屢次輸入，因爲網絡緣由可能會發生前一次響應時間比後一次長的狀況，這時後一次的結果就被覆蓋了。
flatMapLatest能夠解決這個問題。若是以前的Observable尚未未觸發，而又收到了新的Observable，flatMapLatest會取消以前的Observable，只處理最新收到的Observable，這樣就保證了處理請求的前後順序，flatMapLatest在RxJS 5.x中已改名爲switchMap。