Angular 需要进行多个HTTP调用并合并结果

我有一个问题，鉴于我对Angular（v6.0）、RxJs（v6.0）和observables缺乏经验，在过去的一周里，这个问题引起了相当大的头痛

组件使用的服务需要输出数据模型集合，但这样做需要四个单独的api调用，并且我遇到了相关数据的问题，这是可选的，可以停止数据模型的返回

基本流程

• 第一个api调用获取主实体并创建初始数据 模型集合
• 第二个api调用将执行并获取相关数据 并将其添加到数据模型中
• 第三个api调用将转到 相关数据（如果存在）并将其添加到数据模型中
• 第四 api调用将转到并获取与最近相关的 来自第三个api调用的条目。然后进行数据模型收集 返回

设计

• 对于第二个、第三个和第四个api调用，需要使用批处理查询方法 基于ID集合使用以减少呼叫数， 这没关系，因为我们一次只需要10到20条记录

期望值

• 如果没有从第一个api返回主实体，则调用所有 以下调用将不会发生
• 第二次api调用将始终返回数据
• 如果没有从第三个api调用返回相关数据，这不是问题，但是应该返回数据模型集合
• 如果第三次api调用未返回任何相关数据，则第四次api调用将不会发生，但应返回数据模型集合

问题

• 确保在没有结果时返回数据模型集合 发现第三个和第四个api调用发生
• 我无法更改api

已知

• 我没有太多的错误处理方法
• 抱歉，可能有很多bug
• 这是一条长长的链条，最好把它分成小块
• 我对JavaScript的经验已经过时了

尝试过

• 我已经详细研究了“*map”函数和“forkJoin”函数，但是 无法让任何东西正常工作，并且使用RxJs 大多数示例适用于低于6.0的版本，这使其很难实现 翻译

代码
我很想把它缩短，但是我们调用api的方式在这里很重要

return this.agentService.GetByFilter(query)
  .pipe(
    map(agents => {
      let deployments : AgentDeployment[] = [];

      for(let i = 0; i < agents.length; ++i) {          
        deployments.push(new AgentDeployment(agents[i].id, agents[i].name, agents[i].tags));
      };

      return deployments;
    }),
    map(deployments => {
      // Getting related tags assoiciated with the agent

      let tagIds : Array<number> = [];

      // Get tag id's
      for(let i = 0; i < deployments.length; ++i) {          
        if (deployments[i].tagIds) {
          for(let y = 0; y < deployments[i].tagIds.length; ++y) {
            if (!tagIds.includes(deployments[i].tagIds[y])) {
              tagIds.push(deployments[i].tagIds[y]);
            }              
          };
        }
      }

      // Get the tags associated with the agents
      let filter = new Filter();
      filter.Field = 'ID';
      filter.Value = tagIds.join(',');

      // Get tags using list of tag id's
      return this.tagService.GetByFilter(filter).pipe(
        map(tags => {        
          if (tags.length) {
            for(let i = 0; i < tags.length; ++i) {     
              // Find the agent
              deployments.forEach(deployment => {
                if (deployment.tagIds && deployment.tagIds.includes(tags[i].id)) {
                  deployment.tags.push(tags[i]);
                }
              });
            }              
          }
          return deployments;
        }));
    }),
    mergeMap(deployments => deployments),
    map(deployments => {
      // Getting deployments related to the agent, an agent may not have any deployment packages associated

      let agentIds : Array<number> = [];

      // Get tags
      for(let i = 0; i < deployments.length; ++i) {          
        if (deployments[i].id) {
            agentIds.push(deployments[i].id);
        }
      }

      // Get the deployment packages for the agents
      let filter = new Filter();
      filter.Field = 'AgentId';
      filter.Value = agentIds.join(',');

      // Get agent deployment packages using list of agent id's
      return this.agentDeploymentPkgService.GetByFilter(filter)
        .mergeMap(packages =>  packages)
        .groupBy(pkg => pkg.id)            
        .map(pkg$ => {
          if (pkg$) {
            // Add packages to agent deployment
            pkg$.map(pkg => {
            // Find the agent
            let i : number = deployments.findIndex(agent => agent.id == pkg$.key);

              if (pkg.deploymentPackageIds) {
                // Keep last deployment ID handy
                deployments[i].lastDeploymentId = Math.max.apply(null, pkg.deploymentPackageIds);;
                deployments[i].deployments.push(new Deployment(pkg.id, pkg.name))
              }
            }); 
          }
          return deployments;
        });
    }),
    mergeMap(deployments => deployments),
    map(deployments => {
      // Get the logs for the most recent deployment package for the agent, may not exist if no recent deployment package

      let deploymentPackageIds : Array<number> = [];

      // Get tags
      for(let i = 0; i < deployments.length; ++i) {          
        if (deployments[i].id) {
          deploymentPackageIds.push(deployments[i].lastDeploymentId);
        }
      }

      // Get the deployment packages for the agents
      let filter = new Filter();
      filter.Field = 'DeploymentPackageId';
      filter.Value = deploymentPackageIds.join(',');

      // Get agent deployment log based on the last 
      this.logService.GetByFilter(filter)
        .map(logs => {
          logs.forEach(log => {
            // Find the agent
            let i : number = deployments.findIndex(agent => agent.lastDeploymentId == log.deploymentPackageId);

            deployments[i].logId = log.id;
            deployments[i].status = log.lastReportedStatusMessage;
          });

          return deployments;
        });


      return deployments;
    })
  );

返回此.agentService.GetByFilter（查询）
.烟斗(
地图（代理=>{
let部署：代理部署[]=[]；
对于（设i=0；i{
//正在获取与代理关联的相关标记
让tagid:Array=[]；
//获取标签id
对于（设i=0；i<0.length；++i）{
if（部署[i].tagIds）{
对于（设y=0；y{
如果（标签长度）{
对于（设i=0；i{
if（deployment.tagIds&&deployment.tagIds.includes（标记[i].id））{
部署.tags.push（tags[i]）；
}
});
}              
}
返回部署；
}));
}),
合并映射（部署=>部署），
地图（部署=>{
//获取与代理相关的部署时，代理可能没有任何关联的部署包
让agentIds:Array=[]；
//获取标签
对于（设i=0；i<0.length；++i）{
if（部署[i].id）{
推送（部署[i].id）；
}
}
//获取代理的部署包
让过滤器=新过滤器（）；
filter.Field='AgentId'；
filter.Value=agentIds.join（'，'）；
//使用代理id的列表获取代理部署包
返回此.agentDeploymentPkgService.GetByFilter（筛选器）
.mergeMap（包=>packages）
.groupBy（pkg=>pkg.id）
.map（pkg$=>{
如果（包装美元）{
//将包添加到代理部署
包装$.map（包装=>{
//找到代理人
让i:number=deployments.findIndex（agent=>agent.id==pkg$.key）；
if（组件部署包ID）{
//随时准备最后的部署ID
部署[i].lastDeploymentId=Math.max.apply（null，pkg.DeploymentPackageId）；；
部署[i].deployments.push（新部署（pkg.id，pkg.name））
}
}); 
}
返回部署；
});
}),
合并映射（部署=>部署），
地图（部署=>{
//获取代理的最新部署包的日志，如果没有最新部署包，则日志可能不存在
让DeploymentPackageId:Array=[]；
//获取标签
对于（设i=0；i<0.length；++i）{
if（部署[i].id）{
DeploymentPackageId.push（部署[i].lastDeploymentId）；
}
}
//获取代理的部署包
让过滤器=新过滤器（）；
filter.Field='DeploymentPackageId'；
F
forkJoin