Angular 2 - 在继续之前等待 Promise

Question

我需要创建一个地理位置变量并将值发送到 API，但我遇到了麻烦。

public virtualRegistrationHandler(e: any): void {
    e.preventDefault();
    console.log("loop");
    if (navigator.geolocation) {
        let geoLoc = navigator.geolocation.getCurrentPosition(this.setGeoLoc);

        this.VirtualRegistrationService.virtualRegistration(geoLoc)
            .subscribe(
            response => this.toastyCommunicationService.addSuccesResponseToast(response),
            error => this.toastyCommunicationService.addErrorResponseToast(error)
            );
    } else {
        this.toastyCommunicationService.addErrorResponseToast("Geolocation is not supported by this browser.");
    }
}

private setGeoLoc(position: any) {
    console.log("Latitude " + position.coords.latitude, "Longitude " + position.coords.longitude);
    let geoLoc = { "Latitude": position.coords.latitude, "Longitude": position.coords.longitude };
    return geoLoc;
}

这是我当前的代码，但它不等待返回 geoLoc，所以现在它向 API.

发送一个未定义的参数

我想 API 调用等待 geoloc 设置。

我进行了一些谷歌搜索，得到了承诺，但是我在编写语法时遇到了问题，我找不到任何可用的示例。

如何正确编写我的代码，以便在我的函数继续到 API 之前必须先设置 geoLoc？

Answer 1

根据this，getCurrentPosition方法returns一个promise，所以你只需要订阅它。

类似于：

navigator.geolocation.getCurrentPosition(
    pos=>{
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log(`Latitude : ${crd.latitude}`);
  console.log(`Longitude: ${crd.longitude}`);
  console.log(`More or less ${crd.accuracy} meters.`);
    },
    onError=>{
    ...Catch errors...
    }
    );

Answer 2

您可以将 navigator.geolocation.getCurrentPosition 调用转换为 Promise：

const whenPositionGet = new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject));
whenPositionGet.then(
  (position: Position) => {
      console.log("Latitude " + position.coords.latitude, "Longitude " + position.coords.longitude);
  },
  (error: PositionError) => {
      console.error(error);
  }
);

Angular 2 - 在继续之前等待 Promise

Angular 2 - Wait for Promise before continuing

promise

angular-promise

angular