将地理位置API编写为Angular的承诺或可观察的

Question

我正在使用 Angular 6，需要在承诺中获取位置数据。geolocation API具有成功和错误navigator.geolocation.getCurrentPosition(successCallback, errorCallback);回调

w3c 地理位置接口

[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

避免使用类型"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)
);
});
}

Answer 3

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

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

我不知道是否有更好的方法可以做到这一点，但这似乎有效。