угловой HttpClient с rxjs

Question

Я пытаюсь сделать простую вещь в angular 7. Мне просто нужно вызвать 1-й getKey REST API, затем использовать возвращенный ключ, чтобы передать его во 2-й REST API getData чтобы получить мои данные.В конце я хочу, чтобы мой сервис возвратил Observable, поэтому после завершения всего процесса я получаю возвращенные данные.Вот мой код:

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;
      })

    });
  }
}

Я знаю, что я делаю это неправильно, так как я возвращаю подписку, а не Observable.Но просто не могу понять, как это сделать.Будьте осторожны, я только начинаю играть с RxJs и прихожу из опыта AngularJs / обещания:)

Спасибо

Answer 1

Если вы хотите сначала получить ключ, а затем использовать его во втором вызове для получения данных, concatMap - ваш приятель, так как он полагается на предыдущую наблюдаемую завершенность, прежде чем идти вперед.switchMap подходит, если вы хотите отбросить предыдущий наблюдаемый поток и запустить новый, как только предыдущий поток выдаст значение.

Итак, чтобы применить это к вашей службе:

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)
      }) 
    )     
}

Answer 2

По сервисной части:

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

  getData$(){

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

  }

---

и позже на стороне вашего компонента:

 constructor(private myService: MyTestServiceService ) { }

 myMethodToCallMyService() {

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

1. Не subscribe в ваших классах обслуживания.
2. Экспорт вашего headerOptions из любого сервиса (вы можете использовать универсальный сервис для их получения) , так как вы будете использовать их в каждом сервисе, тогда они не должны зависеть от конкретного.

Answer 3

Вы можете использовать switchMap, чтобы набрать несколько вызовов httpClient и вернуть данные как Observable, и вам необходимо ознакомиться с pipe и map операторами rxjs

Попробуй вот так

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
        }));
      }));
  }
}

Надеюсь, это поможет - проверьте это библиотеки rxjs - Удачного кодирования:)

Answer 4

Вы можете использовать switchMap для достижения этой цели -

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