如何在具有返回类型的 TypeScript 方法中从 Observable 返回

Question

我有一个 TypeScript 中的 Google 地理编码服务。我需要此方法在获取给定地址的纬度/经度后返回“GoogleMap”类。

我创建了一个返回“GoogleMap”类型的 TypeScript 方法。但是，我得到了一个

既不是 void 也不是 any 的函数必须返回一个值...

这是我的方法：

getLatLongFromAddress(streetAddress: string): GoogleMap {

    this.geoCodeURL = GOOGLE_GEOCODE_BASE_URL + streetAddress +
        "&key=" + GOOGLE_MAPS_API_KEY;

    this.googleMap = new GoogleMap();

    this.httpService
        .get(this.geoCodeURL)
        .subscribe((data) => {
            this.googleMap.lat = data.results.geometry.location.lat;
            this.googleMap.long = data.results.geometry.location.lng;

            return this.googleMap;
        },
        (error) => {
            console.error(this.geoCodeURL + ".  " + error);

            return Observable.throw("System encountered an error: " + error);
        },
        () => {
            console.info("ok: " + this.geoCodeURL);

            return this.googleMap;
        });
}

我可以理解 http 调用将是异步的，并且流程应该继续到方法的底部，可能在响应返回数据之前。要返回“GoogleMap”，我需要等待这个 Observable 吗？我该怎么做呢？

谢谢！

更新：2016 年 4 月 21 日， 我终于偶然发现了一种令我满意的方法。我知道开发人员有很多帖子乞求“真正的”服务。他们想要向服务传递一个值并取回一个对象。相反，许多答案并没有完全解决问题。简单的答案通常包括调用方的 subscribe() 。这种模式的缺点（通常不被提及）是您必须将服务中检索到的原始数据映射到调用者的回调中。如果您仅从代码中的这一位置调用此服务，则可能没问题。但是，通常，您将从代码中的不同位置调用该服务。因此，每次，您都会在调用者的回调中一次又一次地映射该对象。如果向对象添加一个字段会怎样？现在，您必须寻找代码中的所有调用者来更新映射。

所以，这是我的方法。我们无法摆脱 subscribe()，而且我们也不想这样做。本着这种精神，我们的服务将返回一个Observable<T>拥有我们珍贵货物的观察员。从调用者处，我们将初始化一个变量 ，Observable<T>并且它将获取服务的Observable<T>. 接下来，我们将订阅这个对象。最后，你得到了你的“T”！来自您的服务。

以我的例子为例，现在已修改。记下这些变化。首先，我们的地理编码服务：

getLatLongFromAddress(streetAddress: string): Observable<GoogleMap> {
  ...
  return Observable.create(observer => {
      this.httpService
          .get(this.geoCodeURL)
          .subscribe((data) => {
              ...
              observer.next(this.googleMap);
              observer.complete();
          }

因此，我们将 googleMap 对象包装在“观察者”内。现在让我们看看调用者：

添加此属性：

private _gMapObservable: Observable<GoogleMap>;

呼叫者：

getLatLongs(streetAddress: string) {
     this._gMapObservable = this.geoService.getLatLongFromAddress(this.streetAddr);

     this._gMapObservable.subscribe((data)=>{
          this.googleMap = data;
     });
}

如果您注意到，调用者中没有映射！你只要拿回你的物体就可以了。所有复杂的映射逻辑都在服务中的一处完成。因此增强了代码的可维护性。希望这可以帮助。

Answer 1

你的getLatLongFromAddress签名表明它将返回一个GoogleMap，但是，什么也没有返回（即你的函数的返回值，就目前而言，将是未定义的）。

您可以通过更新方法签名来消除此编译错误：

// Return type is actually void, because nothing is returned by this function.
getLatLongFromAddress(streetAddress: string): void {

    this.geoCodeURL = GOOGLE_GEOCODE_BASE_URL + streetAddress +
        "&key=" + GOOGLE_MAPS_API_KEY;

    this.httpService
        .get(this.geoCodeURL)
        .subscribe((data) => {
            this.googleMap = new GoogleMap();
            this.googleMap.lat = data.results.geometry.location.lat;
            this.googleMap.long = data.results.geometry.location.lng;
        },
        (error) => {
            console.error(this.geoCodeURL + ".  " + error);
            return Observable.throw("System encountered an error: " + error);
        },
        () => {
            console.info("ok: " + this.geoCodeURL);
            return this.googleMap;
        });
}

额外的花絮，我不认为 Rx 使用 onError 和 onComplete 回调返回值（查看文档，这些回调的签名的返回值为void），尽管我可能是错误的。