I am currently working on an application using AngularJS and TypeScript. In the constructor, I have a load function that is called like this:
private load(): angular.IPromise<void> {
const progTokInit: string = 'initial';
this.$scope.progress.start(progTokInit);
return this.entityService
.load(this.$scope.projectRevisionUid)
.then(resp => {
//Performing operations for each employeeModel to get the finance type of the person
resp.employeeRates.forEach(employeeModel => this.getFinanceType(employeeModel));
this.refreshCostRate(...resp.employeeRates)
.then(() => // Another Function )
.then(() => // Yet Another Function )
})
}
In order to fetch the finance type of a person based on their cost center number, I have implemented the getFinanceType() function as follows:
private getFinanceType (employeeModel:any) {
this.costService.getFinanceType(employeeModel.person.cost_center.getValue()[0])
.then((result) => {
console.log('res ', result);
employeeModel.financeType = result;
return result;
});
}
Since the above function is asynchronous, there may be a delay in retrieving all the relevant data. Therefore, I need to ensure that I wait for the getFinanceType() function to complete before moving on to the next step, which involves calling
this.refreshCostRate(...resp.employeeRates)I attempted to use async/await in the getFinanceType() function:
private async getFinanceType (employeeModel:any) {
await return this.costService.getFinanceType(employeeModel.person.cost_center.getValue()[0])
.then((result) => {
console.log('res ', result);
employeeModel.financeType = result;
return result;
});
}
However, I found that the execution continued even before the data was completed, leading to issues with setting the employeeModel.financeType at the right time.
If anyone has suggestions on how to handle this situation and ensure that the getFinanceType() function finishes its task before proceeding to other functions, I would greatly appreciate your help.