Angular中如何在forkJoin中调用数据服务方法？

问题说明 #

想将数据服务的带参方法传入forkJoin并行执行，当前代码无法正常运行；尝试过pipe+mergeMap但无法获取第一个请求的返回结果，需要解决方案。

当前代码 #

组件中调用代码 #

forkJoin([this._dataService.getTradeLetterTotals(this.selectedPlannedBy.PlannedBy_ID, this.selectedProductGroup.Product_Group_ID, 1), 
        this._dataService.getTradeLetterTotals(this.selectedPlannedBy.PlannedBy_ID, this.selectedProductGroup.Product_Group_ID, 2)]).subscribe((results: any) => {
          console.log(results);
          this.tradeLetterFullYearData = results[0].data
          this.tradeLetterAdjPeriodData = results[1].data
          this.isTradeLetterFullYearFinished = true;
          this.checkRemoveLoading();
      });

数据服务方法 #

getTradeLetterTotals(plannedByID, productGroupID, timePeriodID) {
    let cmd = "TradeLetter/Totals/" + plannedByID + "/"  + productGroupID + "/"  + timePeriodID;
    return this.get(this.urlUser() + cmd);
}

protected get(cmd: string) {
    //console.log(cmd)
    return this._http.get(cmd);
}

解决方案 #

一、修复forkJoin的问题 #

你的写法本身是可行的（把数据服务返回的Observable传入forkJoin完全支持），无法运行大概率是以下原因：

• 检查Observable是否完成：forkJoin要求所有传入的Observable都完成才会发射结果。HttpClient.get默认会自动完成，但如果有拦截器或额外操作干扰了Observable的生命周期，可通过tap调试确认：

  import { tap } from 'rxjs/operators';
  
  const plannedByID = this.selectedPlannedBy.PlannedBy_ID;
  const productGroupID = this.selectedProductGroup.Product_Group_ID;
  
  forkJoin([
    this._dataService.getTradeLetterTotals(plannedByID, productGroupID, 1)
      .pipe(tap(res => console.log('请求1返回:', res))),
    this._dataService.getTradeLetterTotals(plannedByID, productGroupID, 2)
      .pipe(tap(res => console.log('请求2返回:', res)))
  ]).subscribe(results => {
    // 处理结果
  }, error => console.error('请求失败:', error));
  

• 验证参数与URL正确性：确认plannedByID和productGroupID不是undefined，可在getTradeLetterTotals中打印cmd检查URL是否合法。
• 添加错误处理：forkJoin只要有一个请求失败就会触发error回调，未处理错误会导致订阅无响应，务必加上错误分支。

二、解决串行请求获取第一个结果的问题 #

如果需要串行执行请求（先完成第一个再执行第二个），用concatMap替代mergeMap（mergeMap是并行处理，可能导致第一个结果还没拿到就执行了第二个）：

const plannedByID = this.selectedPlannedBy.PlannedBy_ID;
const productGroupID = this.selectedProductGroup.Product_Group_ID;

this._dataService.getTradeLetterTotals(plannedByID, productGroupID, 1).pipe(
  concatMap(result1 => {
    // 这里可以直接获取第一个请求的结果
    this.tradeLetterFullYearData = result1.data;
    // 返回第二个请求的Observable
    return this._dataService.getTradeLetterTotals(plannedByID, productGroupID, 2);
  })
).subscribe(result2 => {
  this.tradeLetterAdjPeriodData = result2.data;
  this.isTradeLetterFullYearFinished = true;
  this.checkRemoveLoading();
}, error => console.error('请求失败:', error));

三、代码优化建议 #

提取重复参数，减少冗余代码：

const commonParams = {
  plannedByID: this.selectedPlannedBy.PlannedBy_ID,
  productGroupID: this.selectedProductGroup.Product_Group_ID
};

forkJoin([
  this._dataService.getTradeLetterTotals(commonParams.plannedByID, commonParams.productGroupID, 1),
  this._dataService.getTradeLetterTotals(commonParams.plannedByID, commonParams.productGroupID, 2)
]).subscribe(...)

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