1

我正在订阅 Google Maps API 以根据地址获取坐标。我的理解是，通过等待订阅行，它应该等待该代码块完成，然后再进入以下行。

  async getCoordinates(address) {
      let url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(address) + '&key=' + environment.geocodeKey;
      let lat;
      let lng;
      let coord: Coordinate;
      await this.http.get(url).subscribe(data => {
          let map = data.json() as Results;
          lat = map.results[0].geometry.location.lat;
          lng = map.results[0].geometry.location.lng;
          console.log("inner lat is: " + lat)
      });
      console.log("outer lat is: " + lat)
      coord = new Coordinate(lat, lng);
      console.log("coord lat is: "+ coord.latitude)
      return coord;
  }

但是，当我运行该应用程序时，我在控制台中看到了这一点：

outer lat is: undefined
coord lat is: undefined
inner lat is: 38.912799

这向我表明，等待块内的代码是最后执行的。没有异步/等待，我有相同的结果。如何让订阅代码首先执行并让其他代码等到我的 lat 和 lng 有值？现在他们只有在订阅块内有值，但我不能像这个答案建议的那样在里面放一个返回线。

我读过 Angular 中的 await/async 与 promise 和 callback 本质上是一样的。我已经通过使用 .then() 将此异步 getCoordinates 函数的结果视为一个承诺：

service.getCoordinates(this.address).then(
    (val) => this.coordinates = val,
    (err) => console.log(err)
);
4

1 回答 1

1

Angular 的 http 服务返回一个Observable. 您可以使用 rxjstoPromise运算符将其转换为 Promise：

import 'rxjs/add/operator/toPromise';

await this.http.get(url).toPromise().then()
...
于 2017-12-06T19:56:37.280 回答