I am currently experiencing an issue with the execution order of recursive RxJS Observables within an Angular application. Specifically, I have a service called RefreshReportService that handles the refreshing of reports. The refreshreport method is intended to refresh a report and its nested reports recursively.
The problem arises when the recursive calls appear to be running in parallel rather than waiting for the previous one to complete. Below is a simplified version of the code:
refreshreport(report_name: string): Observable<any> {
let operations_list: any = [];
let primary_key: string = "";
return new Observable((observer) => {
this.ifreportisfromotherreports(report_name, (nestedreports: any[]) => {
if (nestedreports) {
const recursiveCalls = nestedreports.map((nested_report_name) => {
return this.refreshreport(nested_report_name);
});
from(recursiveCalls).pipe(
concatMap((recursiveCall) => recursiveCall)
).subscribe({
next: (response: any) => { console.log(response); },
error: (err) => { console.log(err); },
complete: () => {
// Proceed with remaining logic after recursive calls
observer.complete();
}
});
}
const token = localStorage.getItem('auth-token');
const headers = new HttpHeaders({
'Authorization': `token ${token}`
});
const formData = new FormData();
formData.append('report_name', report_name);
this.http.post('http://127.0.0.1:8000/getreportoperationslist', formData, { headers, withCredentials: true }).subscribe({
next: (response: any) => {
operations_list = response.operations_list;
primary_key = response.primary_key;
},
error: (err) => {
console.log(err);
},
complete: () => {
const updateapicalls: Observable<any>[] = [];
operations_list.forEach((operation: any) => {
updateapicalls.push(this.createRequestObservable(operation));
});
from(updateapicalls).pipe(
concatMap((observable) => observable)
).subscribe({
next: (response: any) => { console.log(response); },
error: (err) => { console.log(err); },
complete: () => {
this.DeleteReport(report_name, primary_key);
observer.complete(); // Notify the outer observer that this recursion is complete
}
});
}
});
});
});
}
I am seeking a solution to ensure that the recursive calls run sequentially, awaiting completion before moving on to the next call. Any suggestions on how to achieve this would be greatly appreciated!
https://i.sstatic.net/UlWYd.png
Included below is a snapshot from the networks tab showing the discrepancies in the ordering of function calls. The initial call is accurate, followed by the first recursive function call, but subsequent calls are not in the correct order.
Upon testing the code, I observed that the function calls were not in the expected order. I anticipate the correct sequence of calling should involve the inner functions first before proceeding to the outer ones.