javascript - 将 Geolocation API 编写为 Angular 的 promise 或 observable

Question

我正在使用 Angular 6，需要在 promise 中获取位置数据。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 编写一个利用成功和错误回调的 promise 或 observable？

Answer 1

以可观察的方式，

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

Answer 2

您可以创建一个异步打字稿函数来返回一个新的承诺

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)
      );
    });
  }