javascript - JS - Promise + geolocation.watchPosition

Question

我尝试将 JavaScript Promise 与地理定位结合使用，但无法使其与 geolocation.watchPosition 一起正常工作，then 子句仅被调用一次:

function Geolocation() {
  this._options = {
    enableHighAccuracy: true, 
    maximumAge        : 10000, 
    timeout           : 7000
  }
}

Geolocation.prototype = {
  get watchID() { return this._watchID; },
  set watchID(watchID) { this._watchID = watchID; },
  get options() { return this._options; },
  // hasCapability: function() { return "geolocation" in navigator; },
  _promise: function(promise) {
    var geolocation = this;
    if (promise == "getPosition")
      return new Promise(function(ok, err) {
        navigator.geolocation.getCurrentPosition(
          ok.bind(geolocation), err.bind(geolocation),
          geolocation.options
        );
      });
    else if (promise == "watchPosition")
      return new Promise(function(ok, err) {
        geolocation.watchID = navigator.geolocation.watchPosition(
          ok.bind(geolocation), err.bind(geolocation),
          geolocation.options
        );
      });
  },
  getPosition: function() { return this._promise('getPosition'); },
  watchPosition: function() {
    this.clearWatch();
    return this._promise('watchPosition');
  },
  clearWatch: function() {
    if (!this.watchID) return;
    navigator.geolocation.clearWatch(this.watchID);
    this.watchID = null;
  }
};

var geolocation = new Geolocation();
geolocation.watchPosition()
  .then(
    function(position) {
      console.log("latitude: " + position.coords.latitude + " - longitude: " + position.coords.longitude)
    },
    function(error) {
      console.log("error: " + error);
    }
  )

我尝试使用从 watchPosition/0 返回的中间 promise ，但它返回相同的结果。

我错过了什么？

Answer 1

回答我自己。

已关注 @Benjamin Gruenbaum关于使用回调的建议，可以将处理 geolocation.watchPosition 响应的单个回调与 Promise 结合起来，然后使用 then().catch() 模式(在notify函数中):

function Geolocation() {
  this._options = {
    enableHighAccuracy: true, 
    maximumAge        : 10000,
    timeout           : 7000
  }
};

Geolocation.prototype = {
  get watchID() { return this._watchID; },
  set watchID(watchID) { this._watchID = watchID; },
  get options() { return this._options; },
  // hasCapability: function() { return "geolocation" in navigator; },
  _promise: function(promise, cb) {
    var geolocation = this;
    return new Promise(function(ok, err) {
      if (promise == "getPosition")
        navigator.geolocation.getCurrentPosition(cb, cb,
          geolocation.options
        );
      else if (promise == "watchPosition")
        geolocation.watchID = navigator.geolocation.watchPosition(
          cb, cb, geolocation.options
        );
    });
  },
  getPosition: function(cb) { return this._promise("getPosition", cb); },
  watchPosition: function(cb) {
    this.clearWatch();
    return this._promise("watchPosition", cb);
  },
  clearWatch: function() {
    if (!this.watchID) return;
    navigator.geolocation.clearWatch(this.watchID);
    this.watchID = null;
  }
};

/* Testing functions from another module */
function log(Data) { console.log(Date() + " " + Data); };
function logOk({coords: {latitude: latitude, longitude: longitude}}) {
  log("latitude: " + latitude + " - longitude: " + longitude);
};
function logError({code: code, message: message}) {
  log("error geo " + code + " - " + message);
};

/* Callback from another module */
function notify(event) {
  return new Promise(
      function(ok, err) { event.coords ? ok(event) : err(event); }
    ).then(logOk).catch(logError);
};

/**/
var geolocation = new Geolocation();
// geolocation.getPosition(notify);
geolocation.watchPosition(notify);

不确定我是否正确使用 Promise，但它可以工作并且允许利用链接。