时间戳

首页 > 解决方案 > RXJS 使调用同步

angular - RXJS 使调用同步

问题描述

在我的服务中，我有一个从 iframe 父级获取令牌并使用该令牌进行休息调用的代码。

下面是执行 GET REST 调用的方法的代码片段。

public get_agencyschema() {
return this.tokenService.authenticatedToken.pipe(
  map(token => {
    const opt = {
      headers: new HttpHeaders({
        Authorization: token
      })
    };
    console.log('get_agency %%%%%%%%%%%%%%%%%%%%%%%% ' + token);

    return this.http.get(this.baseUrl', opt);
  }));
}

当我从我的组件调用这个方法时，我得到一个未定义的。这是我的组件的代码。

private doSomething() {
this.rest.get_agencyschema().subscribe(data => {
  /* tslint:disable:no-string-literal */
  this.ccConfig = data['_embedded']['item'];
  /* tslint:enable:no-string-literal */
  for (let index = 0; index < Object.keys(this.ccConfig).length; index++) {
    if (Object.keys(this.ccConfig[index].configuration).length > 0) {
      this.Schema = this.ccConfig[index];
      // console.log(this.Schema);
      break;
    }
  }
  // console.log(this.Schema.configuration);
  this.LocationVerifyForm.setValue({
    MatchDistance: this.Schema.configuration.MatchDistance,
    IsReturnClosestMatch: this.Schema.configuration.IsReturnClosestMatch,
    WildcardCharacters: this.Schema.configuration.WildcardCharacters,
    IntersectionDelimiterCharacters: this.Schema.configuration.IntersectionDelimiterCharacters,
    MaxReturnResults: this.Schema.configuration.MaxReturnResults,
    IsDisplayHighAndLowCrossStreets: this.Schema.configuration.IsDisplayHighAndLowCrossStreets,
    IsDisplayHighAndLowCrossBlocks: this.Schema.configuration.IsDisplayHighAndLowCrossBlocks,
    IsDisplayBlockNumbersForIntersections: this.Schema.configuration.IsDisplayBlockNumbersForIntersections,
    DisableAutoSelectVerifiedLocation: this.Schema.configuration.DisableAutoSelectVerifiedLocation,
    IsDisplayTableOfContent: this.Schema.configuration.IsDisplayTableOfContent,
    DistanceInMeter: this.Schema.configuration.DistanceInMeter,
    Direction: this.Schema.configuration.Direction,
    IsFilterBeatsByCityEnabled: this.Schema.configuration.IsFilterBeatsByCityEnabled,
    CascadeLevel: this.Schema.configuration.CascadeLevel,
    BlockKeyword: this.Schema.configuration.BlockKeyword,
    BlockDisplayFormat: this.Schema.configuration.BlockDisplayFormat,
    BlockGeoCodeLocation: this.Schema.configuration.BlockGeoCodeLocation,
    IsRetainInvalidPremiseNumber: this.Schema.configuration.IsRetainInvalidPremiseNumber,
    GeoDatabase: this.Schema.configuration.GeoDatabase
  });
});
this.LocationVerifyForm = new FormGroup({
  MatchDistance: new FormControl(),
  IsReturnClosestMatch: new FormControl(),
  WildcardCharacters: new FormControl(),
  IntersectionDelimiterCharacters: new FormControl(),
  MaxReturnResults: new FormControl(),
  IsDisplayHighAndLowCrossStreets: new FormControl(),
  IsDisplayHighAndLowCrossBlocks: new FormControl(),
  IsDisplayBlockNumbersForIntersections: new FormControl(),
  DisableAutoSelectVerifiedLocation: new FormControl(),
  IsDisplayTableOfContent: new FormControl(),
  DistanceInMeter: new FormControl(),
  Direction: new FormControl(),
  IsFilterBeatsByCityEnabled: new FormControl(),
  CascadeLevel: new FormControl(),
  BlockKeyword: new FormControl(),
  BlockDisplayFormat: new FormControl(),
  BlockGeoCodeLocation: new FormControl(),
  IsRetainInvalidPremiseNumber: new FormControl(),
  GeoDatabase: new FormControl()
});
}

我是 RXJS 和 Observables 的新手。有人可以帮我找出问题，以便在组件方法中获取 GET 方法的响应。

提前致谢。

标签： angularrxjsobservable

解决方案

在 rxjs 中，你不会“映射”到一个新的 observable，但你会使用“switchMap”（如果总是只有一个调用可以激活）或“mergeMap”（如果多个执行可以并行运行）。

return this.tokenService.authenticatedToken.pipe(
  switchMap(token => {
    const opt = {
      headers: new HttpHeaders({
        Authorization: token
      })
    };
    console.log('get_agency %%%%%%%%%%%%%%%%%%%%%%%% ' + token);

    return this.http.get(this.baseUrl', opt);
  }));
}

现在，您将返回将传递 http get 调用结果的 observable。

推荐阅读