Javascript 如何在执行下一行代码之前完成wait-subscribe块?

Javascript 如何在执行下一行代码之前完成wait-subscribe块?,javascript,angular,async-await,angular-observable,Javascript,Angular,Async Await,Angular Observable,我正在订阅GoogleMapsAPI,根据地址输入坐标。我的理解是,通过等待subscribe行,它应该等待代码块完成,然后再转到下面的行 async getCoordinates(address) { let url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(address) + '&key=' + environment.geocodeKey;

我正在订阅GoogleMapsAPI,根据地址输入坐标。我的理解是,通过等待subscribe行,它应该等待代码块完成,然后再转到下面的行

  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
这向我表明wait块中的代码是最后执行的。我在没有async/await的情况下得到了相同的结果。如何让订阅代码先执行,然后让其他代码等待,直到我的lat和lng有一个值?现在它们只有subscribe块中的值,但是我不能在其中放一个返回行

我读过Angular中的wait/async本质上与承诺和回调相同。我已经通过使用.then()将此异步getCoordinates函数的结果视为承诺:


Angular的http服务返回一个可观察的
。您可以使用rxjs
toPromise
操作符将其转换为承诺:

import 'rxjs/add/operator/toPromise';

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

确保
this.http.get(url).subscribe
返回承诺…这就是问题所在
this.http.get(url)
返回可观察的,而不是承诺。您只能使用带有承诺的async/await。有关差异的更多信息,请参阅。
import 'rxjs/add/operator/toPromise';

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