I'm trying to do a simple thing in angular 7. I just need to call 1st a getKey REST api, then use the returned key to pass it to a 2nd REST api getData to get my data. In the end I want my service to return an Observable so when all the process it completed I get the returned data. Here my code :
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class MyTestServiceService {
constructor(private http: HttpClient) { }
getData$(){
return this.http.get("http://myservice/getKey").subscribe((key : string) => {
const httpOptions = {
headers: new HttpHeaders({
'Key': key
})
};
return this.http.get("http", httpOptions).subscribe(data => {
return data;
})
});
}
}
I know I'm doing it wrong since I return a subscription and not an Observable. But just can't figure out how to do it. Be gentle I'm just starting playing with RxJs and come from a AngularJs/promise background :)
Thanks
Sunil Singh :
\n You can use switchMap to achieve this - \n\n\n getData$(){\n return this.http.get(\"http://myservice/getKey\").pipe(\n switchMap(key=>{\n const httpOptions = {\n headers: new HttpHeaders({\n 'Key': key\n })\n };\n return this.http.get(\"http\", httpOptions);\n })\n );\n }\n",
2018-11-12T15:33:49
Mike Tung :
If you want to first fetch a key and then use it in the second call to get data, concatMap is your pal as it relies on the previous observable to complete before going forward. switchMap is appropriate if you want to discard the previous observable stream and start a new one as soon as the previous stream emits a value.\n\nSo to apply this to your service:\n\ngetData$(): Observable<whatever you return in api here>{\n return this.http.get('getKeyUrl').pipe(\n concatMap(key => {\n const headers = new HttpHeaders({'Key': key});\n return this.http.get('urlTwo', httpOptions)\n }) \n ) \n}\n",
2018-11-12T18:01:59
SeleM :
On the service part :\n\nconst httpOptions = {\n headers: new HttpHeaders({\n 'Key': key\n })\n };\n\n getData$(){\n\nreturn this.http.get(\"http://myservice/getKey\", httpOptions )\n\n }\n\n\n\n\nand later in your component side:\n\n constructor(private myService: MyTestServiceService ) { }\n\n myMethodToCallMyService() {\n\n this.myService.getData$().subscribe(data => console.log(data));\n }\n\n\n\nDo not subscribe in your services classes.\nExport your headerOptions out of any service (you can use a generic service to get them), since you'll use them in every service , then they should not depend on a specific one.\n",
2018-11-12T15:34:24