在 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 - 直接在selectedCandidateDataLoaded()方法里面写forkJoin不订阅

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

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

*ngIf="selectedCandidateDataLoaded() | async"

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

What is the best professional way to detect the status of several ajax requests in Angular8?

ajax

httpclient

rxjs

angular