為 Angular 編寫 Geolocation API 作為 promise 或 observable

Question

我正在使用 Angular 6，需要在承諾中獲取位置數據。 geolocation API有一個成功和錯誤回調navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

w3c 地理定位 API

[NoInterfaceObject]
interface Geolocation {
  void getCurrentPosition(PositionCallback successCallback,
  optional PositionErrorCallback errorCallback,
  optional PositionOptions options);

  long watchPosition(PositionCallback successCallback,
  optional PositionErrorCallback errorCallback,
  optional PositionOptions options);

  void clearWatch(long watchId);
};

我將如何為利用成功和錯誤回調的 Angular 編寫承諾或可觀察對象？

Answer 1

以可觀察的方式

getLocation(): Observable<any> {
 return new Observable(obs => {
  navigator.geolocation.getCurrentPosition(
    success => {
      obs.next(success);
      obs.complete();
    },
    error => {
      obs.error(error);
    }
  );
});
}

Answer 2

您可以創建一個異步打字稿函數以返回新的Promise

async getLocation() {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, reject);
  });
}

const pos = this.getLocation();
pos.then(res => {
  console.log(res);
})
.catch(err => {
  console.log(err);
});

我不知道是否有更好的方法可以這樣做，但這似乎行得通。

Answer 3

避免使用類型“any”

 getLocation() {
    return new Observable<GeolocationCoordinates>((observer) => {
      window.navigator.geolocation.getCurrentPosition(
        (position) => {
          observer.next(position.coords);
          // observer.complete() marks the observable as done. It means we can no longer emit any more values out of this observable
          observer.complete();
        },
        // observer.error puts observable into an error state. It means we can no longer emit any more values out of this observable
        (err) => observer.error(err)
      );
    });
  }