map、mergeMap 和 switchMap 是 RxJS 中的三个主要运算符，在 SAP Spartacus 开发中有着广泛的使用场景。
map
map 是 Observables 中最常见的运算符。 它的作用与数组中的映射相对相似。 map 接收从 Observable 发出的每个值，对其执行操作并返回一个 Observable（因此 Observable 链可以继续）。
把它想象成一个函数，它将采用原始值和投影。 该函数将投影应用于所述值并在转换后返回它们。
让我们举个例子。 假设我们有一个 Observable 数组。 这个数组是一个 Person 的集合。 一个对象代表每个人，每个人都有自己的名字和喜欢的角色。 我们只对获取所有角色的列表感兴趣。
import { of } from 'rxjs'; import { map } from 'rxjs/operators'; const observable = of([ { name: "Parwinder", character: "Calcifer" }, { name: "Laure", character: "Alchemist" }, { name: "Eliu", character: "X-Men" }, { name: "Robert", character: "Link" } ]); observable.pipe( map(arr => arr.map(person => person.character)) // loops over objects and returns characters ).subscribe( char => console.log(char) // ["Calcifer", "Alchemist", "X-Men", "Link"] );
mergeMap
mergeMap 是 Observable map 和 mege 的组合。 在实际项目中，经常需要 map 生成多个 Observable。 例如，现在我有一个角色数组，对于每个角色，我想进行后端调用并获取一些信息。
看下面的例子：
import { of, from } from 'rxjs'; import { map } from 'rxjs/operators'; const dummyApi = (character) => { // fake api call function return of(`API response for character: ${character}`).pipe( delay(1000) // the fake api takes 1 second ); } from(["Calcifer", "Alchemist", "X-Men", "Link"]) // characters I need to get information for .pipe( map(arr => dummyApi(arr)) // generates 4 new Observables ).subscribe( // subscribing Observable (outer) of 4 Observables (inner) data => data.subscribe(i => console.log(i)) // subscribing to inner Observables )
dummyApi 是现实项目中的典型例子：输入某个关键字，返回关键字对应的明细，包裹在一个 Observable 对象里。也就是说，map 投影的输出是一个 Observable，而不是普通对象，因此上面的代码编写了丑陋的嵌套 subscribe 来获取实际值。
使用 mergeMap 后，这个操作符能够自动将 map 返回的 Observable 进行 flatten 操作。使用 map 时丑陋的双重 subscribe 调用消失了。
import { of, from } from 'rxjs'; import { mergeMap } from 'rxjs/operators'; const dummyApi = (character) => { return of(`API response for character: ${character}`)..pipe( delay(1000) ); } from(["Calcifer", "Alchemist", "X-Men", "Link"]) .pipe( mergeMap(arr => dummyApi(arr)) // gets 4 Observable as API response and merges them ).subscribe( // we subscribe to one mapped and merged Observable data => console.log(data) )
switchMap
switchMap 的功能与 mergeMap 的功能相同，但略有不同。 switchMap 将订阅外部 Observable 中的所有内部 Observable，但不会合并内部 Observable。 它改为切换到最新的 Observable 并将其传递给链。
它仍然提供一个 Observable 作为输出，不是通过合并，而是通过仅从最新的 Observable 发出结果的想法。
对于我们的最后一个示例，如果我们使用 switchMap，我们只会从最后一个 Observable 中获取结果。
import { of, from } from 'rxjs'; import { switchMap, delay } from 'rxjs/operators'; const dummyApi = (character) => { return of(`API response for character: ${character}`).pipe( delay(1000) ); } from(["Calcifer", "Alchemist", "X-Men", "Link"]) .pipe( switchMap(arr => dummyApi(arr)) ).subscribe( data => console.log(data) // API response for character: Link )
有些场景是 switchMap 擅长的，比如所谓的 typehead.
想象这样一个场景：UI 上有一个输入框，我们在其中根据最终用户输入的内容，向其返回搜索结果。
如果用户打算输入 Chase，开始输入 C，然后触发一个 API 调用。 然后客户继续输入 h，我们就必须再次针对 Ch 调用一次后台 API。 此时，我们之前针对 C 的 API 调用已经毫无用处。 我们应该取消之前的 Observable， 并订阅 Ch 对应的 Observable. 更一般性地说，我们需要切换到最新的 Observable.
import { of, from } from 'rxjs'; import { switchMap, delay } from 'rxjs/operators'; const dummyApi = (character) => { return of(`Search result for keyword: ${character}`).pipe( delay(1000) ); } from(["C", "Ch", "Cha", "Chas", "Chase"]) // mimic key input in text field .pipe( switchMap(arr => dummyApi(arr)) ).subscribe( data => console.log(data) // Search result for keyword: Chase )
