javascript - 是否可以将诸如 Geolocation.watchPosition() 之类的函数包装在 Promise 中？

Question

我想知道是否可以包装 Geolocation.watchPosition() https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition在一个 Promise 中，并以它工作的方式将它与 async/await 习语一起使用；每当设备的位置发生变化并调用后续功能时，就会不断返回位置。

// Example Class
class Geo {
  // Wrap in Promise
  getCurrentPosition(options) {
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject, options)
    })
  }

  // Wrap in Promise
  watchCurrentPosition(options) {
    return new Promise((resolve, reject) => {
      navigator.geolocation.watchPosition(resolve, reject, options)
    })
  }

  // Works well.
  async currentPosition() {
    try {
      let position = await this.getCurrentPosition()
      // do something with position.     
    }
    catch (error) {
      console.log(error)
    }
  }

  // Any way...?
  async watchPosition() {
    try {
      let position = await this.watchCurrentPosition()
      // do something with position whenever location changes. 
      // Invoking recursively do the job but doesn't feel right.
      watchPosition()
    }
    catch (error) {
      console.log(error)
    }
  }
}

Answer 1

还没有。

您描述的模式是一个Observable - Javascript 中没有语言支持，但它即将到来。

在 ES2015 中，我们得到了生成器:function* 和 yield，它允许 Iterators - 拉取每个 yield for...of 循环。

Generators 还支持推送 Observers，使用 var valToGet = yield foo; 和 generator.next(valToPush); 语法。

生成器是同步的 - 它们只是来回传递一个线程。

在 ES2017 中，我们得到了 async 和 await - 它们在幕后使用生成器将每个 await 转换为 async 函数 到 yield new Promise(...。async function 成为 promises 的迭代器。

理想情况下，我们可以这样做:

async watchPosition*() {
    try {
        while(this.enabled) {
            // Loop each time navigator.geolocation.watchPosition fires success
            const position = await this.watchCurrentPosition();

            // Pass back to the listener until generator.next
            const atDestination = yield position;
            if(atDestination)
                break; // We're here, stop watching
        }
    }
    catch (error) {
        console.log(error)
    }
}

不幸的是，目前还不支持async function* - 函数可以是生成器或async，但不能同时是两者。也没有像迭代器那样漂亮的 for...of 语法，只有笨拙的 generator.next(pushValue)，所以使用这个假设的方法有点难看:

async listener() { 
    const generator = Geo.watchPosition();
    let item = await generator.next(false);
    while (!item.done) {
        // Update UI
        const atDestination = areWeThereYet(item.value);
        item = await generator.next(atDestination);
    }
}

所以异步迭代器/可观察对象即将到来，但首先要解决很多问题。

与此同时，有一些特殊的库支持观察者模式并且现在可用，例如 RxJS .