RxJS 5.4中forkJoin传空数组时内部mergeMap不执行求助

嘿，这个坑我之前踩过！在RxJS 5.x版本里，forkJoin确实有个让人头疼的行为——当你传入的Observable数组是空的时候，它完全不会发出任何值，导致后面的mergeMap永远不会被调用。

问题原因 #

RxJS 5.x的forkJoin设计逻辑是：只有当所有传入的Observable都完成时，才会发出合并后的结果。但空数组里没有任何Observable可以完成，所以它会一直处于等待状态，永远不会触发后续的操作符。

解决方案 #

这里有两种简单的处理方式，都能完美解决这个问题：

1. 手动判断数组是否为空

在调用forkJoin之前，先检查数组长度，如果是空数组，就用Observable.of([])来替代，这样就能保证后续流程正常执行：

let uploads$ = [obs1$, obs2$, obs3$];

// 处理空数组场景，确保source$一定会发出值
const source$ = uploads$.length === 0 
  ? Observable.of([]) 
  : Observable.forkJoin(uploads$);

source$
  .mergeMap(res => {
    let data = someCalculation(res);
    return this.http.post('http://endpoint/api/resource', data);
  })
  .subscribe(res => {
    // 处理最终的POST响应
  });

2. 封装自定义的forkJoin工具函数

如果你的项目里经常遇到这种场景，可以封装一个处理空数组的forkJoin工具函数，避免重复写判断逻辑：

// 自定义forkJoin，自动处理空数组情况
function forkJoinWithEmpty<T>(sources: Observable<T>[]): Observable<T[]> {
  return sources.length === 0 
    ? Observable.of([]) 
    : Observable.forkJoin(sources);
}

// 使用时直接调用这个函数即可
forkJoinWithEmpty(uploads$)
  .mergeMap(res => {
    let data = someCalculation(res);
    return this.http.post('http://endpoint/api/resource', data);
  })
  .subscribe(res => {
    // 处理最终的POST响应
  });

补充说明 #

在RxJS 6及以上版本中，官方已经修复了这个问题——forkJoin传入空数组时会直接发出一个空数组，不需要额外处理。但由于你使用的是5.4版本，上面的两种方法是最稳妥的兼容方案。

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