Rxjs的zip和switchMap方法

最新推荐文章于 2025-06-11 09:00:50 发布

原创最新推荐文章于 2025-06-11 09:00:50 发布 · 5.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Rxjs #异步处理

js 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了RxJS中的两个核心操作符：Zip和SwitchMap。Zip操作符可以将多个Observable组合起来，根据它们发出的值按顺序创建一个新的Observable。SwitchMap则用于将源Observable中的每个值映射为一个新的Observable，并且只保留最新的内部Observable的值。通过具体示例展示了这两个操作符的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，Zip

将多个 Observable 组合以创建一个 Observable，该 Observable 的值是由所有输入 Observables 的值按顺序计算而来的。

如果最后一个参数是函数, 这个函数被用来计算最终发出的值.否则, 返回一个顺序包含所有输入值的数组.

Rx.Observable.zip(Rx.Observable.of(2),Rx.Observable.of(3)).subscribe(([a,b])=>console.log(a+'-'+b))  //输出2-3

2，switchMap

将每个源值投射成 Observable，该 Observable 会合并到输出 Observable 中，并且只发出最新投射的 Observable 中的值。

返回的 Observable 基于应用一个函数来发送项，该函数提供给源 Observable 发出的每个项，并返回一个(所谓的“内部”) Observable 。每次观察到这些内部 Observables 的其中一个时，输出 Observable 将开始发出该内部 Observable 所发出的项。当发出一个新的内部 Observable 时，switchMap 会停止发出先前发出的内部 Observable 并开始发出新的内部 Observable 的值。后续的内部 Observables 也是如此。

Observable

该 Observable 发出由源 Observable 发出的每项应用投射函数 (和可选的 resultSelector)后的结果，并只接收最新投射的内部 Observable 的值。

示例一:

每次点击返回一个 interval Observable

var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.switchMap((ev) => Rx.Observable.interval(1000));
result.subscribe(x => console.log(x));

示例二:

Rx.Observable.of(2).switchMap((a)=>{console.log(a);return Rx.Observable.of(3)}).subscribe((b)=>console.log(b))   //输出2,3

Rxjs的zip和switchMap方法

返回:

示例一:

示例二: