如何在 javascript 中执行另一个代码之前设置一些数据？

Question

我正在尝试在执行另一个代码之前先设置我的地理位置数据。事实证明，如果我这样做，它会给我初始数据。有没有办法等待第一个代码执行完毕，数据可用后，我可以执行第一个代码下面的代码？

<template>
  <button @click="start">Start</button>
</template>

<script>
  import { ref } from "vue";

  export default {
    data() {
     return {
       latitude: ref(0),
       longitude: ref(0)
     };
    },
    methods: {
      start() {
        this.getLocation(); // execute this first
        console.log(this.latitude, this.longitude); // execute this after the data is updated
    },
    getLocation() {
            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(this.showPosition);
            } else {
              alert("Geolocation is not supported by this browser.");
            }
      },
  showPosition(position) {
     this.latitude = position.coords.latitude;
     this.longitude = position.coords.longitude;
  },
};
</script>

Answer 1

两件事：

1. 从this.getLocation()返回一个Promise
2. 将start() 转换为async start()，以便您可以在函数中使用await 关键字

export default {
  data() {
    return {
      latitude: ref(0),
      longitude: ref(0),
    };
  },
  methods: {
    async start() {
      const success = await this.getLocation(); // execute this first
      if (success) {
          console.log(this.latitude, this.longitude); // execute this after the data is updated
      } else {
          alert("Geolocation is not supported by this browser.");
      }
    },
    getLocation() {
      return Promise((resolve) => {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(pos => {
            this.showPosition(pos);
            resolve(true);
          })
        } else {
          resolve(false)
        }
      });
    },
    showPosition(position) {
      this.latitude = position.coords.latitude;
      this.longitude = position.coords.longitude;
    },
  },
};