RXJS mergeMap未执行问题求助，需修正代码实现指定业务逻辑

• mergeMap 是RxJS的高阶映射操作符，要求回调函数必须返回可观察对象（Observable/Promise/类Observable结构），你当前代码中mergeMap回调直接返回普通数据bns，不符合操作符入参要求，导致数据流中断，因此mergeMap及后续tap逻辑都不会执行。

方案1：同步场景（performloadKey无异步返回，推荐写法） #

同步场景不需要使用mergeMap，直接用tap执行前置操作即可，符合你「先执行业务操作、再更新页面标志位」的需求：

// Component.ts 修正后代码
this.bns$ = this.myService.getBns().pipe(
  tap((bns) => {
    // 基于响应执行业务操作，需要用bns的话直接传参即可 performloadKey(bns)
    performloadKey();
  }),
  tap((bns) => {
    console.log(bns);
    // 此处更新HTML绑定用到的标志位
  }),
  takeUntil(this.destroyed$)
);

this.bns$.subscribe();

service.ts代码无问题不需要修改。

方案2：异步场景（performloadKey返回Observable，需等待执行完成） #

如果performloadKey是异步方法，需要等它执行完成再走后续逻辑，才需要使用mergeMap，保证回调返回可观察对象即可：

// Component.ts 修正后代码
this.bns$ = this.myService.getBns().pipe(
  mergeMap((bns) => {
    // 等待异步操作执行完成后，将原bns数据流转到下游
    return performloadKey(bns).pipe(
      map(() => bns)
    );
  }),
  tap((bns) => {
    console.log(bns);
    // 此处更新HTML绑定用到的标志位
  }),
  takeUntil(this.destroyed$)
);

this.bns$.subscribe();

兼容写法（坚持使用mergeMap处理同步逻辑） #

如果你就是要保留当前的mergeMap写法，只需要把返回的普通值用of包裹成可观察对象即可修复问题：

this.bns$ = this.myService.getBns().pipe(
  mergeMap((bns) => {
    performloadKey();
    // 普通值转可观察对象，恢复数据流流转
    return of(bns);
  }),
  tap((bns) => {
    console.log(bns);
  })
);

this.bns$.pipe(takeUntil(this.destroyed$)).subscribe();

内容的提问来源于stack exchange，提问作者Deadpool_er