return-type - 如何使用返回类型从 TypeScript 方法中的 Observable 返回

Question

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

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

function that is neither void nor any must return a value...

这是我的方法:

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 吗？我该怎么做？

谢谢!

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

所以，这是我的方法。我们无法摆脱 subscribe()，我们也不想。在这种情况下，我们的服务将返回 Observable<T>与拥有我们宝贵 cargo 的观察员。从调用者那里，我们将初始化一个变量， 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 )，尽管我可能会误会。