Question

我有几个相互依赖的API调用。具体来说，我无法使最终的Observable正确返回：这会导致应用无限期滞后。

如果我先叫this.projectAttributeService.findAndUpdateByProjectAndMetumId({...})然后叫.subscribe，它似乎可以正常工作。这表明我的前端的Observable链接存在问题。按照目前的情况，该方法甚至没有在后端调用（我已经设置了断点）。

// .service

submitPhasesForm(projectId) {
  return this.activityDateService.activities$.pipe(
    first(),
    concatMap((activities: ActivityDate[]) => {
      this.activities = activities;
      if (this.activities.length === 0) {
        return observableOf({});
      }
      this.activities = activities.map(a => {
        a.project_program_id = parseInt(projectId, 10);
        return a;
      });
      return this.activityDateService.update(this.activities);
    }),
    mergeMap(() => {
      if (this.activities.length === 0) {
        return observableOf({});
      }
      return this.projectAttributeService.getAllMetadata(3).pipe(first())
    }),
    mergeMap((metaData: ProjectAttMetadataAPIResponse) => {
      if (this.activities.length === 0) {
        return observableOf({});
      }
      const metaDataId = (metaData as any).find(m => m.name === 'Phase').id;

    // EDIT: the problem ended up being with the synchronous 
    // this.getProjectPhase(this.activities) method below
      return this.projectAttributeService.findAndUpdateByProjectAndMetumId({
        project_program_id: parseInt(projectId, 10),
        value: this.getProjectPhase(this.activities),
        project_attrib_metum_id: metaDataId
      })
    })
  )
}

这是findAndUpdateByProjectAndMetumId()的样子（呼叫似乎可以正常运行）：

findAndUpdateByProjectAndMetumId(body: ProjectAttribute): Observable < ProjectAttribute > {
  return this.http.put < ProjectAttribute > (`${ environment.API_URL }project-attribute`, body);
}

这就是submitPhasesForm()的调用位置：

// .component

import { forkJoin as observableForkJoin } from 'rxjs';

return this.projectService.patch(this.projectId, {
    summary: projectSummary || proj.summary
  }).pipe(
    first(),
    mergeMap(() => {
      return observableForkJoin(
        this.phasesFormDataService.submitPhasesForm(this.projectId).pipe(first()),
        this.pdpMetricsFormService.submitPdpForm(this.projectId).pipe(first()),
        this.projectStatusFormService.submitStatusForm(this.projectId).pipe(first())
      )
    })
  )
  .subscribe((res) => {
    this.router.navigate([`./pdp/${this.currentTab}/${this.projectId}`]);
  });

其他两个调用非常相似，尽管更短：

submitPdpForm(projectId) {
    return this.pdpMetricsForm$.pipe(
      first(),
      concatMap((formGroup: FormGroup) => {
        if (!formGroup.get('etRadioModel')) {
          return observableOf({});
        }

        const objSend = {...}
        return this.projectService.upsertPdpMetrics(projectId, objSend);
      })
    )
  }

...

submitStatusForm(projectId) {
    return this.metrics$.pipe(
      first(),
      tap(metrics => {
        this.metricsData = metrics;
      }),
      mergeMap(() => this.statusesForm$),
      observableMap(statusesForm => {
        const formGroup = statusesForm;

        if (!formGroup.get('resourceRationale')) {
          return {};
        }

        const obj = [{...}]

        return sendObj;
      }),
      mergeMap((sendObj: any) => {
        if (isEmpty(sendObj)) { return observableOf(sendObj) };
        return this.projectService.upsertMetrics(projectId, sendObj).pipe(first());
      })
    )

我链接或调用那些Observable的方式看起来有什么不对吗？

非常感谢您的帮助！

如果第一个of({})的可见数据不产生任何数据，我将返回activities$，因此我可以在不进行不必要的API调用的情况下进入Observable流-我愿意提出更精巧的建议break进入“可观察”链的方式。

Answer 1

结果证明我的同步this.getProjectPhase(this.activities)方法遇到逻辑错误，该错误将应用程序发送到无限循环中。

否则，可观察的运算符可以正常工作。

如果this.activities为空，我仍然想找到一种更时尚的方法来突破该流。

如何在一系列API调用中正确链接可观察对象

1 个答案: