当前位置: 首页 > Web前端 > JavaScript

什么时候使用RxjsmergeMap

时间:2023-03-27 12:59:21 JavaScript

注:flatMap是mergeMap的别名。如果一次只能激活一个内部订阅,请使用switchMap。如果内部可观察对象的发射和订阅顺序很重要,请使用concatMap。当您需要展平内部observable但又想手动控制内部订阅的使用次数时,mergeMap非常有用。例如,当使用switchMap时,每个内部订阅都在源发出时完成,即在任何时间段内只允许一个活动的内部订阅。相比之下,mergeMap允许多个内部订阅同时处于活动状态。因此,mergeMap最常见的用例之一是不应取消的请求,这些请求被视为写入而不是读取。一个典型的例子就是SAP电商云购物车中不同行项目的数量,可以并行增加或减少。请注意,如果必须保持这些写入顺序,那么concatMap是更好的选择。比如数据库写操作。由于mergeMap一次维护多个活跃的内部订阅,它可能会由于长期存在的内部订阅而导致内存泄漏。一个基本示例是,如果您使用映射到可观察对象的内部计时器或dom事件流。在这些情况下,如果您仍希望使用mergeMap,一个好主意是利用另一个运算符来管理内部订阅的完成,例如考虑take或takeUntil。当然你也可以使用concurrent参数来限制一次内部订阅的数量。看一个例子:import{fromEvent,of}from'rxjs';import{mergeMap,delay}from'rxjs/operators';//假网络请求saveconstsaveLocation=location=>{returnof(location).pipe(delay(500));};//streamsconstclick$=fromEvent(document,'click');click$.pipe(mergeMap((e:MouseEvent)=>{returnsaveLocation({x:e.clientX,y:e.clientY,timestamp:Date.now()});}))//已保存!{x:98,y:170,...}.subscribe(r=>console.log('Saved!',r));saveLocation是一个函数,它将任何传入的输入参数包装到一个Observable中,这个Observable不会立即发出数据,而是延迟500毫秒。mergeMap接收一个函数作为输入参数。该函数的入参是通过管道链接到mergeMap的Observable中包含的元素,即MouseEvent;project返回的数据类型是一个新的Observable,其中包含屏幕点击的X和Y坐标以及当前时间戳。产生的最终输出: