在发送 Api 调用之前等待查询参数

Question

尝试在 API 调用中使用一些 url 参数。最终我的计划是允许用户输入邮政编码，然后我会将邮政编码转换为纬度和经度。这是一个数字标牌解决方案，用户可以在其标牌系统中设置 URL 并将其位置作为 url.

的一部分

这是我在 Vue 中创建的函数。诚然，我既是 Vue 的新手，又仍在尝试完全理解 async await。我以为我做到了，但这与发送 API 调用之前不等待查询中的纬度和经度参数不一致。

async created() {
    const lat = await this.$route.query.lat;
    const lon = await this.$route.query.lon;
    try {
      const response = await axios.get(
          'https://api.openweathermap.org/data/2.5/onecall?lat=' + lat + '&lon=' + lon + '&units=imperial&exclude=minutely,alerts&appid=' + process.env.VUE_APP_APIKEY,
          { headers: {"Content-Type": "application/json"} }
      )
      this.weather = response.data
    } catch (err) {
        console.log(err.toJSON());
    }
  }

当前使用设置更新代码

setup() {
    const route = useRoute();
    let lat = ref(0);
    let lon = ref(0);
    let weather = ref(null);


    watchEffect(() => {
      lat.value = route.query.lat;
      console.log(lat.value);
      lon.value = route.query.lon;
      console.log(lon.value);

      axios.get(
        'https://api.openweathermap.org/data/2.5/onecall?lat=' + lat.value + '&lon=' + lon.value + '&units=imperial&exclude=minutely,alerts&appid=' + process.env.VUE_APP_APIKEY,
        { headers: {"Content-Type": "application/json"} }
      ).then( response => {
        weather.value = response.data;
        console.log(weather);
      }).catch(e => {
        console.log(e);
      });
    });

    return {
      lat, lon, weather
    }
  },

Answer 1

我建议在 watch 函数（在选项和合成 API 中）或 watchEffect（仅在合成 API 中） ), 后者不那么复杂。它只是监听反应属性的变化。

<script setup>
import { useRoute } from 'vue-router';
import { ref, watchEffect } from 'vue';

const route = useRoute();

const lat = ref(0);
const long = ref(0);

watchEffect(() => {
  lat.value = route.query.lat;
  lng.value = route.query.lng;
});
</script>

您需要更好地保护作业！

在发送 Api 调用之前等待查询参数

Waiting for Query Params before Sending Api Call

vue.js

vue-router