Как я могу завершить блок подписки await перед выполнением следующей строки кода?

Question

Я подписываюсь на API Карт Google, чтобы получать координаты на основе адреса. Насколько я понимаю, в ожидании строки подписки следует дождаться завершения этого блока кода, прежде чем перейти к следующим строкам.

  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 будут иметь значение? Прямо сейчас у них есть только значения внутри блока подписки, но я не могу поместить строку возврата внутрь, как предполагает этот ответ.

Я читал, что await / async в Angular - это то же самое, что обещание и обратный вызов. Я рассматриваю результат этой асинхронной функции getCoordinates как обещание уже с помощью.then():

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

Answer 1

Http-сервис Angular возвращает Observable, Вы можете преобразовать это в обещание, используя rxjs toPromise оператор:

import 'rxjs/add/operator/toPromise';

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