RxJS内部订阅每个级别的订阅返回值并存储到各自的变量中 [英] RxJS subscribe inside subscribe with each level returns values and store into respective variables

问题描述

我知道已经有关于嵌套订阅的帖子.在这里，我们为每个变量(operationId，actionlistId，componentId，traceId)提供了5个级别的subscriptionoperation.这里的Apis正在呼叫，其功能如下.

I know already there are posts regarding the Nested Subscribe. Here, we have 5 leveled subscribeoperation with each variables (operationId,actionlistId,componentId,traceId). Here Apis are calling whose function is given below.

步骤1:到api GetOperationTemplate的orderTemplateId，将获得值operationModel和operationId.
第2步:操作ID到api GetActionTemplate，将获得值actionId，actionListId和actionModel.
第3步: actionId到api GetComponentUsageTemplate，将获取值componentId和componentModel.
第4步: componentId/到api GetTraceTemplate，将获得值traceId和traceModel.

Step 1: orderTemplateId to api GetOperationTemplate, will get values operationModel and operationId.
Step 2: operationId to api GetActionTemplate, will get values actionId, actionListId and actionModel.
Step 3: actionId to api GetComponentUsageTemplate, will get values componentId and componentModel.
Step 4: componentId/ to api GetTraceTemplate, will get values traceId and traceModel.

旧工作代码，这会导致延迟.

  onOrderTemplateClick(selectedData: any): void {
    this.selectedData = selectedData;
    this.descOrderTemplate = selectedData.name;
    this.orderTemplateId = selectedData.id;
    this.orderTemplateFormGroup.controls['orderTemplate'].setValue(this.descOrderTemplate);
    console.log('OperationTemplate');

    this.ordertemplateService.GetOperationTemplate(this.orderTemplateId)
     .subscribe((res: any) => {
        this.operationModel = res;
        if (Object.keys(this.operationModel).length > 0) {
          console.log(this.operationModel);
          console.log('ActionList');
          this.ordertemplateService.GetActionTemplate(this.operationModel[0].id)
             .subscribe((res1: any) => {
              this.actionModel = res1;

              if (Object.keys(this.actionModel).length > 0) {
                this.actionId = res1[0].id;
                this.actionListId = res1[0].parentId;
                console.log(this.actionModel);
                console.log('Action Parameters');

                this.ordertemplateService.GetActionParameterTemplate(this.actionModel[0].parentId)
                 .subscribe((res2: any) => {
                    if (Object.keys(res2).length > 0) {
                      this.actionParamModel = res2;
                      this.actionParameterId = res2[0].id;
                      this.actionParameterId = this.actionParamModel[0].id;
                    } else {
                      this.initializeActionParameterComponentTrace();
                    }
                  });

                console.log('Component Usage');
                this.ordertemplateService.GetComponentUsageTemplate(this.actionModel[0].id)
                 .subscribe((res3: any) => {
                    this.componentModel = res3;
                    this.componentId = res3[0].id;
                    if (Object.keys(this.componentModel).length > 0) {
                      console.log(this.componentModel);
                      console.log('Component Usage');
                      this.ordertemplateService.GetTraceTemplate(this.componentModel[0].parentId)
                        .subscribe((res4: any) => {
                          this.traceModel = res4;
                          if (Object.keys(this.traceModel).length > 0) {
                            this.traceId = res4[0].id;
                            console.log(this.traceModel);
                            console.log('Trace Usage');
                          } else {
                            this.initializeTrace();
                          }

                        });
                    } else {
                      this.traceActions(this.actionModel[0].id);

                    }
                  });


              } else {
                this.initializeComponentTrace();
              }
            }
            );
        } else {
          this.initializeAll();
        }


      });
  }

我正在尝试使用switchmap的

新工作代码.

NEW WORKING CODE which I am trying using switchmap.

 onOrderTemplateClick(selectedData: any): void {
    this.selectedData = selectedData;
    this.descOrderTemplate = selectedData.name;
    this.orderTemplateId = selectedData.id;
    this.orderTemplateFormGroup.controls['orderTemplate'].setValue(this.descOrderTemplate);
    console.log('OperationTemplate');
    this.ordertemplateService.GetOperationTemplate(this.orderTemplateId)
    .pipe(
    switchMap((opData)=> {        
            this.operationModel = opData;
            if (Object.keys(this.operationModel).length > 0) {
              console.log(this.operationModel);
        } else {
                    this.initializeAll();
                }
        }),
    switchMap((actData)=> {
        console.log('ActionList');
            this.actionModel=this.ordertemplateService.GetActionTemplate(this.operationModel[0].id); // actdata[0].id
         if (Object.keys(this.actionModel).length > 0) {
                    this.actionId = this.actionModel[0].id;
                    this.actionListId = this.actionModel[0].parentId;
                    console.log(this.actionModel);
            console.log('Action Parameters');
                    this.actionParamModel = this.ordertemplateService.GetActionParameterTemplate(this.actionModel[0].parentId);
            if (Object.keys(this.actionModel).length > 0) {
            this.actionParameterId = this.actionParamModel[0].id;
            console.log(this.actionParamModel);
            } else {
            this.initializeActionComponentTrace();
            }       
        } else {
                    this.initializeActinonactionParameterComponentTrace();
                }
        }),
    switchMap((cmpData)=> {
        console.log('Component Usage');
        this.componentModel = this.ordertemplateService.GetComponentUsageTemplate(this.actionModel[0].id); // cmpData[0].id
        this.componentId = this.componentModel[0].id;
        if (Object.keys(this.componentModel).length > 0) {
                      console.log(this.componentModel);
                      console.log('Component Usage');
        } else {
                    this.initializeComponentTrace();
                }       
        }),
    switchMap((traceData)=> {
        this.traceModel = this.ordertemplateService.GetTraceTemplate(this.componentModel[0].parentId); // cmpData[0].id
                if (Object.keys(this.traceModel).length > 0) {
                     this.traceId = this.traceModel[0].id;
                     console.log(this.traceModel);
                     console.log('Trace Usage')
         } else {
                     this.initializeTrace();
                 }

    }))
    .subscribe((data)=> {
        if(data!= undefined) {
        console.log(data);
        }
  })
}

以下代码导致最大10秒的延迟.嵌套订阅与延迟有关吗?

The below code causes delay of 10 sec(max). Is Nested Subscribe related to delay?

推荐答案

通常，您的代码没有任何问题(我指的是您更新后的代码).但是，我确实意识到，在每个switchMap()运算符序列中，您实际上并没有发出任何新的可观察值，因此，这并不是使用RxJs的switchMap()运算符的正确方法.

Generally, there is nothing wrong with your code (I am referring to your updated code). However, I do realise that within each switchMap() operator sequence, you aren't really emitting any new observable values, hence that isn't really the right way to use RxJs's switchMap() operator.

如文档中所述，switchMap允许您

As described on the documentation, switchMap allows you to

映射到可观察的，完整的先前内部可观察的，发出值.

Map to observable, complete previous inner observable, emit values.

因此，使用 tap 运算符可能更合适，因为您只是按顺序执行副作用，并且在订阅时返回到链末尾可观察到的源.

Therefore, it might be more appropriate to use the tap operator, as you are merely performing side effects in sequence, and returning to source observable at the end of the chain when you subscribe to it.

onOrderTemplateClick(selectedData: any): void {
  this.selectedData = selectedData;
  this.descOrderTemplate = selectedData.name;
  this.orderTemplateId = selectedData.id;
  this.orderTemplateFormGroup.controls['orderTemplate'].setValue(this.descOrderTemplate);
  console.log('OperationTemplate');
  this.ordertemplateService.GetOperationTemplate(this.orderTemplateId)
    .pipe(
      tap((opData) => {
        this.operationModel = opData;
        if (Object.keys(this.operationModel).length > 0) {
          console.log(this.operationModel);
        } else {
          this.initializeAll();
        }
      }),
      tap((actData) => {
        console.log('ActionList');
        this.actionModel = this.ordertemplateService.GetActionTemplate(this.operationModel[0].id); // actdata[0].id
        if (Object.keys(this.actionModel).length > 0) {
          this.actionId = this.actionModel[0].id;
          this.actionListId = this.actionModel[0].parentId;
          console.log(this.actionModel);
          console.log('Action Parameters');
          this.actionParamModel = this.ordertemplateService.GetActionParameterTemplate(this.actionModel[0].parentId);
          if (Object.keys(this.actionModel).length > 0) {
            this.actionParameterId = this.actionParamModel[0].id;
            console.log(this.actionParamModel);
          } else {
            this.initializeActionComponentTrace();
          }
        } else {
          this.initializeActinonactionParameterComponentTrace();
        }
      }),
      tap((cmpData) => {
        console.log('Component Usage');
        this.componentModel = this.ordertemplateService.GetComponentUsageTemplate(this.actionModel[0].id); // cmpData[0].id
        this.componentId = this.componentModel[0].id;
        if (Object.keys(this.componentModel).length > 0) {
          console.log(this.componentModel);
          console.log('Component Usage');
        } else {
          this.initializeComponentTrace();
        }
      }),
      tap((traceData) => {
        this.traceModel = this.ordertemplateService.GetTraceTemplate(this.componentModel[0].parentId); // cmpData[0].id
        if (Object.keys(this.traceModel).length > 0) {
          this.traceId = this.traceModel[0].id;
          console.log(this.traceModel);
          console.log('Trace Usage')
        } else {
          this.initializeTrace();
        }

      }))
    .subscribe((data) => {
      if (data != undefined) {
        console.log(data);
      }
    })
}

关于延迟，这可能是因为它是一个很长的序列，并且您要调用很多操作，所以才花很长时间才能完成它.我建议您删除不需要按顺序运行的所有函数调用，并在可观察到的流程之外调用它们.

With regards to the delay, that is probably because it is quite a long sequence, and that you are invoking quite a number of operations, which is why it takes a long time to finish running it. I would recommend you to remove any function calls that do not require it to be run in sequence, and call them outside the observable flow.

这篇关于RxJS内部订阅每个级别的订阅返回值并存储到各自的变量中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！