I am faced with a challenge involving multiple service methods that fetch data from various servers. The responses from these APIs come in at different times, and I need to store the responses in variables as soon as they are received.
Here are my service methods:-
GetDataServer1(req) {
return this._http.post("server1", req)
.pipe(
tap((res) => console.log(res)),
map((res) => res), catchError(this.handleError.bind(this)));
}
GetDataServer2(req) {
return this._http.post("server2", req)
.pipe(
tap((res) => console.log(res)),
map((res) => res), catchError(this.handleError.bind(this)));
}
GetDataServer3(req) {
return this._http.post("server3", req)
.pipe(
tap((res) => console.log(res)),
map((res) => res), catchError(this.handleError.bind(this)));
}
Currently, the data is logged in the console based on the order of received responses. Even though I've tried using forkJoin and zip from the component to gather data, I only receive the data when all service methods have been executed. What I actually need is to get a response as soon as any API returns data.
Below is my component method for reference:-
getData(data){
req1 = this.service.GetDataServer1(data);
req2 = this.service.GetDataServer1(data);
req3 = this.service.GetDataServer1(data);
forkJoin([req1,req2,req2])
.subscribe(([res1,res2,res3]) => {
console.log(res1);
console.log(res2);
console.log(res3);
})
}
Can anyone advise me on how to achieve fetching data in line with my requirements?
Thank you for your assistance.