angular - 在Angular8中检测多个ajax请求状态的最佳专业方法是什么？

Question

一个完整的变量由 6 部分组成，如下所示

selectedCandidateData: Candidate = {
    candidateBasic: null,
    experienceList: null,
    educationList: null,
    certificationList: null,
    candidateAbout: null,
};

每个部分都将通过每个 ajax 调用获得，如下所示

// get the profile data of selected candidate
this.candidateService.getBasic(candidatePersonalInfo.id).subscribe(
    (candidateBasic) => {
        this.selectedCandidateData.candidateBasic = candidateBasic;
    },
    (error) => {
        console.log(error);
    }
);

this.candidateService.getExperience(candidatePersonalInfo.id).subscribe(
    (experienceList) => {
        this.selectedCandidateData.experienceList = experienceList;
    },
    (error) => {
        console.log(error);
    }
);

this.candidateService.getEducation(candidatePersonalInfo.id).subscribe(
    (educationList) => {
        this.selectedCandidateData.educationList = educationList;
    },
    (error) => {
    console.log(error);
    }
);

this.candidateService.getCertification(candidatePersonalInfo.id).subscribe(
    (certificationList) => {
        this.selectedCandidateData.certificationList = certificationList;
    },
    (error) => {
        console.log(error);
    }
);

this.candidateService.getAbout(candidatePersonalInfo.id).subscribe(
    (candidateAbout) => {
        this.selectedCandidateData.candidateAbout = candidateAbout;
    },
    (error) => {
        console.log(error);
    }
);

正如你在上面看到的， selectedCandidateData 将在 6 次 ajax 调用后进行。我做了以下函数来检测所有 6 个 ajax 请求是否成功。

selectedCandidateDataLoaded() {
    return (
        this.selectedCandidateData.candidateBasic !== null &&
        this.selectedCandidateData.experienceList !== null &&
        this.selectedCandidateData.educationList !== null &&
        this.selectedCandidateData.certificationList !== null &&
        this.selectedCandidateData.candidateAbout !== null
    );
}

所以在模板中，为了渲染，我使用了如下代码

<app-candidate-profile *ngIf="selectedCandidateDataLoaded()" [candidate]="selectedCandidateData"></app-candidate-profile>

如我所见，我目前的解决方案非常糟糕，看起来不太专业。
为了改进我的代码，我回顾了 Angular8，我发现 Rxjs .
看来 Rxjs 可以帮助我使我的代码简单并且看起来非常专业。
我怎样才能做到这一点既简单又专业？

Answer 1

您可以使用 forkJoin两种类型的用例的运算符:
1 - 在您的组件构造函数或 ngOnInit 中执行以下操作:

forkJoin(
  {
    candidateBasic: this.candidateService.getBasic(candidatePersonalInfo.id),
    experienceList: this.candidateService.getExperience(candidatePersonalInfo.id), 
    educationList: this.candidateService.getEducation(candidatePersonalInfo.id),
    certificationList: this.candidateService.getCertification(candidatePersonalInfo.id),
    candidateAbout : this.candidateService.getAbout(candidatePersonalInfo.id)
  }
)
.subscribe(e => this.selectedCandidateData = e)

在你的模板中使用 selectedCandidateData变量而不是 selectedCandidateDataLoaded()或者
2 - 直接写 forkJoin内 selectedCandidateDataLoaded()方法，不要订阅。

selectedCandidateDataLoaded() : Observable<Candidate> {
   return forkJoin({...});
}

在您的模板中使用异步管道，如:

*ngIf="selectedCandidateDataLoaded() | async"