Angular 4中如何同步嵌套Subscribe？

这种层层嵌套的订阅写法不仅会造成回调地狱，代码可读性和维护性极差，更关键的是异步请求的执行顺序完全不可控——你没法保证service2.methode2GetByID的返回顺序和data1里的row1顺序一致，后续service3的请求更是如此。好在RxJS提供了一系列操作符来帮我们优雅地管理异步流，解决同步问题，下面是几种常用的方案：

方案1：串行处理所有请求（保证顺序） #

如果你需要严格按照data1中row1的顺序依次处理每个请求（前一个请求完成后再执行下一个），可以用concatMap搭配forkJoin来实现：

this.service1.methode1().pipe(
  concatMap((data1: any[]) => {
    // 对每个row1，先请求service2，再处理service3
    const rowObservables = data1.map(row1 => 
      this.service2.methode2GetByID(row1.id).pipe(
        concatMap((data2: any[]) => {
          // 处理当前row1对应的data2，并行请求所有row2的service3
          return forkJoin(
            data2.map(row2 => this.service3.methode3GetByID(row2.id))
          );
        })
      )
    );
    // 串行执行所有row1对应的请求流
    return concat(...rowObservables);
  })
).subscribe(
  allData3 => {
    // allData3会按data1的row1顺序，依次返回每组row2对应的data3数组
    console.log("处理完成的结果", allData3);
  },
  error => {
    console.error("请求出错", error);
  }
);

关键操作符说明： #

• concatMap：保证内部的Observable串行执行，前一个完成后才会订阅下一个，完美解决顺序问题。
• forkJoin：等待一组Observable全部完成后，返回所有结果的数组，适合处理同一层的并行请求（比如同一个row1下的所有row2请求）。

方案2：并行处理所有请求（提高效率） #

如果不需要严格的顺序，只想等所有请求都完成后统一处理结果，可以用mergeMap搭配forkJoin让所有请求并行执行：

this.service1.methode1().pipe(
  mergeMap((data1: any[]) => {
    // 把所有要执行的请求打包成一个Observable数组
    const allRequests = data1.flatMap(row1 => 
      this.service2.methode2GetByID(row1.id).pipe(
        mergeMap((data2: any[]) => 
          // 展开data2的每个row2对应的service3请求
          data2.map(row2 => this.service3.methode3GetByID(row2.id))
        )
      )
    );
    // 等待所有并行请求完成，返回所有结果
    return forkJoin(allRequests);
  })
).subscribe(
  allData3 => {
    console.log("所有请求完成的结果", allData3);
  },
  error => {
    console.error("请求出错", error);
  }
);

注意： #

这种方式执行效率更高，但结果的顺序不一定和data1/data2的顺序一致，如果需要关联原始数据，可以在请求时携带上下文，比如：

data2.map(row2 => 
  this.service3.methode3GetByID(row2.id).pipe(
    map(data3 => ({ row1Id: row1.id, row2Id: row2.id, data3 }))
  )
)

方案3：使用async/await（更贴近同步写法） #

如果你习惯同步代码的写法，也可以把Observable转换成Promise，用async/await来处理：

async handleRequests() {
  try {
    const data1 = await this.service1.methode1().toPromise();
    
    for (const row1 of data1) {
      const data2 = await this.service2.methode2GetByID(row1.id).toPromise();
      
      for (const row2 of data2) {
        const data3 = await this.service3.methode3GetByID(row2.id).toPromise();
        // 处理data3
        console.log(`处理row1: ${row1.id}, row2: ${row2.id}的结果`, data3);
      }
    }
  } catch (error) {
    console.error("请求出错", error);
  }
}

优点： #

写法完全同步化，逻辑清晰，适合简单的串行场景；缺点是无法利用RxJS的强大操作符，并行处理起来不如RxJS灵活。

核心原则 #

无论哪种方案，核心都是避免嵌套订阅，通过RxJS的操作符（或Promise的async/await）把异步流扁平化，这样既解决了同步顺序问题，又让代码更易维护。

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