Recently, I encountered an issue related to making multiple API calls using forkjoin in Angular. One specific code snippet that I used for the API call is as follows:
postdata1(body: any): Observable<any> {
// Receive body as a parameter
// Declare headers here if they were special to this request in a global scope if not
return this.http.post(this.baseUrl + 'dictionary/getrae', body, {
headers: headers,
responseType: 'text',
withCredentials: true,
});
}
As I needed to make approximately 20 such calls, I wanted to create a "status bar" that would display the progress percentage and completion status of each post.
Each call would increment the progress percentage and change a message on the interface. However, due to the service being attached, I faced issues updating the interface immediately after each post instead of waiting for all posts to complete before refreshing the UI.
My main question is:
How can I update the interface from the service simultaneously with the completion of each individual post, rather than waiting for all posts to finish?
Thank you in advance.
UPDATE:
The ultimate goal is to achieve a UI update like the following:
step 1 done
step 5 done
step 2 done
step 3 done
step 6 done
step 4 done
finish!
The order of the steps does not matter, but 'finish!' should be displayed at the end.
Below is the code snippet I utilized for forkjoin:
nuevoenviar() {
this.palabrabuscada = $("#inputword").val();
const body = JSON.stringify(this.palabrabuscada);
let data1$ = this.dataService.get1(body);
let data2$ = this.dataService.get2(body);
let data3$ = this.dataService.get3(body);
let data4$ = this.dataService.get4(body);
let data5$ = this.dataService.get5(body);
let data6$ = this.dataService.get6(body);
return forkJoin([data1$, data2$, data3$, data4$, data5$, data6$]).subscribe((responses) => {
this.statusfinish = "step 1...";
this.result1 = responses[0];
this.porcentaje += this.porcentajeparte;
this.statusfinish = "step 2...";
this.result2 = responses[1];
this.porcentaje += this.porcentajeparte;
this.statusfinish = "step 3...";
this.result3 = responses[2];
this.porcentaje += this.porcentajeparte;
this.statusfinish = "step 4...";
this.result4 = responses[3];
this.porcentaje += this.porcentajeparte;
this.statusfinish = "step 5...";
this.result5 = responses[4];
this.porcentaje += this.porcentajeparte;
this.statusfinish = "step 5...";
this.result6 = responses[5];
this.porcentaje += this.porcentajeparte;
this.finalizar(); // This is where your method needs to be called
});
}