Question

我订阅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

这表明await块中的代码是最后执行的。没有async / await我有相同的结果。如何让订阅代码先执行，让其他代码等到我的lat和lng有值？现在他们只在订阅块中有值，但我不能在like this answer suggests内放置一个返回行。

我已经读过Angular中的await / async与promise和callback基本相同。我通过使用.then（）将此async getCoordinates函数的结果视为一个promise：

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

Answer 1

Angular的http服务返回Observable。您可以使用rxjs toPromise运算符将此转换为承诺：

import 'rxjs/add/operator/toPromise';

await this.http.get(url).toPromise().then()
...

如何在执行下一行代码之前完成await subscribe块的完成？

1 个答案: