Angular7服务-返回包含来自另一个可观察对象的数据但订阅组件内的第二个可观察对象的可观察对象？答案

【问题标题】：Angular7 service - returning observable that contains the data from another observable but subscribing to that second Observable within component?Angular7服务-返回包含来自另一个可观察对象的数据但订阅组件内的第二个可观察对象的可观察对象？
【发布时间】：2019-05-12 13:40:56
【问题描述】：

我的服务中有一个函数，它返回一个需要使用特殊令牌执行的 Observable（http 请求）。所以 - 在能够获得此功能之前，我需要检索令牌才能发出请求。

我一直在寻找链接这些请求或检索该令牌的方法，以确保在发出该请求之前它就在那里，但因为它是在构造函数中完成的，所以当您第一次加载页面时，令牌不存在，并且 HTTP 请求失败。

我目前在我的服务中有一个 if 块，如下所示：

 if (!this.activeDirectoryToken) {
      this.adalService
        .acquireToken('https://graph.windows.net')
        .subscribe(token => {
          this.activeDirectoryToken = token;
// RETURN OBS LOGIC OF THE SECOND HTTP REQUEST USING THE TOKEN
            });
        } else {
// RETURN OBS LOGIC OF THE SECOND HTTP REQUEST USING THE TOKEN

但是，当然，如果我尝试订阅该函数并触发 if 块，它将引发错误，因为该类型上不存在“订阅”。

我还将令牌存储在 redux 存储中并在服务的构造函数中订阅它，我还有另一个 if 块在那里发出请求，以防它为 null/false。

尽管如此，由于没有设置令牌，第一个请求仍然失败。

【问题讨论】：

标签： angular rxjs angular7 angular-observable

【解决方案1】：

第一个方法返回令牌。如果它已经被缓存，那么只需返回当前令牌，否则获取一个新令牌并缓存它。

之后，您可以使用switchMap 为您的第二部分执行 http 请求并订阅。

getToken(): Observable<string> {
   if (this.activeDirectoryToken) 
       return Observable.of(this.activeDirectoryToken);

   return this.adalService
      .acquireToken('https://graph.windows.net')
      .pipe(
          do(token => this.activeDirectoryToken = token)
       );
}

secondPart(){
    this.getToken().pipe(
      switchMap( token => SECOND HTTP REQUEST USING THE TOKEN)
    )
    .subscribe(...);
}

注意：未测试

【讨论】：