RxJS中combineLatest的subscribe内返回Observable无法被外部接收问题

问题核心原因 #

• getData方法没有显式返回Observable对象，方法内部subscribe回调里的return语句仅会将值返回到回调函数作用域内，无法向上传递到getData的调用方
• 直接在Service方法内部订阅Observable会提前触发流执行，也无法把后续的Http请求流返回给组件订阅

修复后代码 #

Service.ts #

import { combineLatest, Observable } from 'rxjs';
import { switchMap, filter } from 'rxjs/operators';

function getData(): Observable<any> {
  // 外层返回combineLatest生成的流
  return combineLatest([
    this.activeSellService.getActiveSellServiceId(),
    this.authService.getUserId(),
  ]).pipe(
    // 过滤参数为空的无效场景
    filter(([serviceId, userId]) => !!serviceId && !!userId),
    // 用switchMap将参数流切换为Http请求流
    switchMap(([serviceId, userId]) => {
      const url = `users/${userId}/services/${serviceId}?value=test`;
      return this.http.get<any>(this.endPoint.getUrl(encodeURI(url)));
    })
  );
}

Component.ts 调用代码无需修改，保持原有逻辑即可 #

this.service.getData().subscribe(data => {
  console.log(data);
});

可选RxJS优化方案 #

• 如果getActiveSellServiceId和getUserId都是仅发射一次值就结束的流，可以将combineLatest替换为forkJoin，避免多值场景下的重复请求
• 若需要处理参数为空的异常场景，可以在filter后补充默认分支，或是在组件订阅时新增error回调处理异常
• 建议将返回值的泛型any替换为具体的业务接口类型，提升类型安全性

内容的提问来源于stack exchange，提问作者Front End Developer