使用TypeScript循环拼接HTTP Observable时出现订阅错误的排查

你的问题出在RxJS操作符的不可变性上，以及错误的Observable拼接方式。

为什么原代码会报错？ #

你初始化了一个空的Observable<any>，然后在循环里调用observeGroup.concat(...)——但RxJS的所有操作符都是不会修改原Observable实例的，它们会返回一个全新的Observable。你没有把这个新返回的Observable重新赋值给observeGroup，所以循环结束后，observeGroup还是那个初始的空Observable。这个空Observable不会发出任何值，也不会触发完成信号，导致后续的mergeMap链无法正常执行，最终出现订阅相关的错误。

正确的实现方式 #

根据你的业务需求（是要按顺序提交属性，还是并行提交），有两种常用方案：

方案1：按顺序逐个提交属性（前一个请求完成再发下一个）

适合需要保证属性提交顺序的场景，用concat操作符批量处理Observable数组：

import { concat } from 'rxjs'; // 注意导入对应的操作符

public postFeedProperties(feedId: number, props: FeedPropertyApi[]): Observable<any> {
  // 先把每个属性转换成对应的POST请求Observable
  const requestList = props.map(prop => {
    prop.FeedId = feedId;
    return this.apiService.postData(this.feedPropertyApiUrl, prop, true)
      .map(res => res.json());
  });

  // 按顺序执行所有请求，concat会依次订阅每个Observable
  return concat(...requestList);
}

方案2：并行提交所有属性（同时发起请求，等全部完成再返回）

适合不需要顺序、追求性能的场景，用forkJoin操作符：

import { forkJoin } from 'rxjs'; // 注意导入对应的操作符

public postFeedProperties(feedId: number, props: FeedPropertyApi[]): Observable<any[]> {
  const requestList = props.map(prop => {
    prop.FeedId = feedId;
    return this.apiService.postData(this.feedPropertyApiUrl, prop, true)
      .map(res => res.json());
  });

  // 并行执行所有请求，所有请求完成后返回结果数组
  return forkJoin(requestList);
}

额外提示 #

• 如果你使用的是RxJS 5.x版本，需要用Observable.concat或Observable.forkJoin的写法，而不是直接导入操作符。
• 记得在组件的ngOnDestroy里取消订阅，避免内存泄漏（比如用takeUntil操作符配合销毁信号）。

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