首页 > 解决方案 > 在 navigator.geolocation 产生结果之前,无法停止 parasails 组件方法中的执行

问题描述

单击 ajax 按钮时,我需要获取访问者的位置,然后才将表单数据发送到操作。

到目前为止,我能够根据班级的存在有条件地提交。

问题是我的代码中的 navigator.geolocation 条件没有得到解析,尽管用户看到了同意弹出窗口并且单击了 OK。它只是跳过这个并显示回退位置。

这是我更改后的默认sails ajax 按钮组件:

 methods: {

    click: async function () {
      let btnDelayed = document.getElementById('btn-search');

      if (btnDelayed && btnDelayed.classList.contains('delayed')) {
        console.log('btn-search cannot emit click');
        await this.loadGeoData();
      } else {
        console.log('btn-search can emit click ');
        this.$emit('click');
      }
    },
    loadGeoData: async function () {

      let loc = await this.getLocation();
      console.log('location');
      console.dir(loc);
      /*
            let test = {
              lat: 0.22,
              lng: 0.55
            };
      */
      let btnSubmit = document.getElementById('btn-search');
      btnSubmit.classList.remove('delayed');
      let pos = JSON.stringify(loc);
      this.$emit('pos', pos);
      console.log('pos event value ' + pos);
      this.click();
    },
    getLocation: async function () {
      let loc = {
        lat: 0,
        lng: 0
      };

        if (navigator.geolocation) {
          let options = {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 0
          };

          console.log('geolocation loaded');
          navigator.geolocation.getCurrentPosition(function (position) {
            console.log('getting position...');
            console.dir(position);
            loc.lat = position.coords.latitude;
            loc.lng = position.coords.longitude;
          }, (err) => {
            console.warn(`ERROR(${err.code}): ${err.message}`);
          }, options);
        }

      return loc;
    }
  }

这是控制台日志输出:

btn-search cannot emit click
geolocation loaded
location
{…}
​
lat: 0
​
lng: 0
​
<prototype>: Object { … }
pos event value {"lat":0,"lng":0}
btn-search can emit click

// getting the data in the instance
argins
{…}
​
__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
​
actionref: "{\"lat\":0,\"lng\":0}"
actiontype: "word"
search: ​



avigator.geolocation.getCurrentPosition 虽已执行但表单已提交:

getting position... ajax-button.component.js:108:13
Position
​
coords: Coordinates { latitude: 44.00000000000, longitude: 26.00000000000, accuracy: 931, … }
​
timestamp: 1548163982134

_


当然,我需要它之前执行。

标签: sails.js

解决方案


对于更多的读者,

经过几天的搜索,我找到了这篇文章,Catch Geolocation Error - Async Await,解释了如何使地理定位与 async/await 一起工作。

剩下的就是修改 ajax-button 组件点击事件。


推荐阅读