My application, at the start, needs to get the list of the links so at the beginning I call the principal endpoint to get this list and I store it into a Map.
Now for example if a user call directly the products page, my application needs to do 2 Get call sequentially, first Get call the principal endpoint and store all the links in a Map, then the second Get call the respective product link from the Map.
So what is the best practice in angular to synchronize those 2 calls? (making the second call only after the result of the first one.)
======================================================================== Update
public getLinks2(modelName: string, searchMap: Map<string, string>) {
return this.http.get(EndpointUrlService.baseUrl)
// Prima popolo la mia mappa con la response quindi con tutti i link
.map((response: any) => {
this.linksMap = response._links;
(<any>Object).entries(this.linksMap).forEach(
([key, value]) => {
this.map.set(key, value.href);
}
)
})
.flatMap((res) => {
return this.http.get(this.cutLinks(this.map.get(modelName)) + '/search')
})
.map((response: any) => {
console.log(response);
(<any>Object).entries(response._links).forEach(
([key, value]) => {
searchMap.set(key, value.href);
}
)
})
}
So this is my method implemented with flatMap operator, in this case with first Get call I retrieve all the links from the principal endpoint and I store this list in a Map, then with flatMap I call the desidered endpoint (modelName) from saved Map to retrieve the Search link desidered and I store it in other Map (searchMap)
At the end in my component I call one of the search links stored in searchMap:
this.endPointUrlService.getLinks2(this.getModelName(), this.endPointUrlService.mapNames.get(this.searchMapName()))
.subscribe((res) => {
this.loadModelData(event)
});
It is a good practice? it seems works well