带有 rxjs 的角度 HttpClient答案

【问题标题】：angular HttpClient with rxjs带有 rxjs 的角度 HttpClient
【发布时间】：2018-11-12 15:24:37
【问题描述】：

我正在尝试在 Angular 7 中做一件简单的事情。我只需调用第一个 getKey REST api，然后使用返回的密钥将其传递给第二个 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/promise 背景:)

谢谢

【问题讨论】：

标签： angular rest rxjs angular-http angular-httpclient

【解决方案1】：

您可以使用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);
          })
        );
       }

【讨论】：

【解决方案2】：

如果您想首先获取一个密钥，然后在第二次调用中使用它来获取数据，concatMap 是您的好伙伴，因为它依赖于前一个 observable 在继续之前完成。 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)
      }) 
    )     
}

【讨论】：

【解决方案3】：

关于服务部分：

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

不要在你的服务类中subscribe。
将您的headerOptions 从任何服务中导出（您可以使用通用服务来获取它们），因为您将在每个服务中使用它们，所以它们不应依赖于特定的服务.

【讨论】：

【解决方案4】：

可以使用switchMap实现多次httpClient调用，返回数据为Observable，需要熟悉pipe和maprxjs操作符

这样试试

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 - 快乐编码 :)

【讨论】：