angular HttpClient with rxjs

Question

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

Answer 1

You can use switchMap to achieve this -

   getData$(){
        return this.http.get("http://myservice/getKey").pipe(
          switchMap(key=>{
              const httpOptions = {
            headers: new HttpHeaders({
              'Key': key
            })
          };
          return this.http.get("http", httpOptions);
          })
        );
       }

Answer 2

On the service part :

const httpOptions = {
    headers: new HttpHeaders({
      'Key': key
    })
  };

  getData$(){

return this.http.get("http://myservice/getKey", httpOptions )

  }

---

and later in your component side:

 constructor(private myService: MyTestServiceService ) { }

 myMethodToCallMyService() {

   this.myService.getData$().subscribe(data => console.log(data));
 }

1. Do not subscribe in your services classes.
2. Export 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.

Answer 3

You can use switchMap to achieve multiple httpClient calls and return data as Observable and you need to be familiar about pipe and map rxjs operators

Try like this

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").pipe(
      switchMap(key=>{
         return this.http.get("http", headers: new HttpHeaders({
          'Key': key
        }));
      }));
  }
}

Hope this helps - check this libraries rxjs - Happy coding :)

Answer 4

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.

So to apply this to your service:

getData$(): Observable<whatever you return in api here>{
    return this.http.get('getKeyUrl').pipe(
      concatMap(key => {
        const headers = new HttpHeaders({'Key': key});
        return this.http.get('urlTwo', httpOptions)
      }) 
    )     
}