头图

Rxjs map, mergeMap 和 switchMap 的区别和联系

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
)

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使
873 声望
1.6k 粉丝
0 条评论
推荐阅读
SAP OData 开发实战教程:从入门到提高
本教程根据笔者在 SAP 研究院工作多年的实战经验,计划通过 300 篇以上的文章篇幅,深入介绍 SAP 三大主流的 OData 开发技术:

JerryWang_汪子熙阅读 117

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

873 声望
1.6k 粉丝
宣传栏