如何在页面加载前从 API 获取数据到动态 API URL（空值问题）

Question

我是 javascript 和 vue 的初学者。我正在使用动态路由，我试图在页面加载时将数据从本地 API（通过 Apollo 的 Graphql）传递到 Openweathermap API URL。问题是 openweather API returns 400 因为 URL 传递了一个空值 (this.city)，除非我刷新页面。在 axios（或 fetch）试图从 openweather API 获取任何数据之前，我一直无法弄清楚如何从本地 API 获取值（城市名称）。

简而言之： this.city 作为空值传递给 axios URL which returns 来自 API 的 400 错误，除非我刷新页面（这也不总是有效）。

这是我的代码：

<script>
  import venueQuery from '~/apollo/queries/venue/venue'


  export default {
    data() {
      return {
        loading: 0,
        venues: [],
        city: '',
        sunset: '',
        currentTemp: ''
      }

    },

    apollo: {
      $loadingKey: 'loading',
      venues: {
        prefetch: true,
        query: venueQuery,

        variables() {
          return {
            slug: this.$route.params.slug
          }
        },
        result(result) {
          return this.city = result.data.venues[0].temperature

        }
      }
    },

    created() {

      this.getWeatherInfo()

    },

    methods: {
      getWeatherInfo() {
        this.$axios
          .$get(`${process.env.WEATHER_BASEAPI}${this.city}${process.env.WEATHER_KEY}`).then(data => {
            this.currentTemp = Math.floor(data.main.temp - 273.15);
            this.sunset = new Date(data.sys.sunset * 1000).toLocaleTimeString("en-GB").slice(0, 5)
          })
      }
    }
  }

</script>

如有任何帮助，我们将不胜感激。

Answer 1

由于 city 是在创建组件后异步填充的，因此 getWeatherInfo()（在 created 挂钩中）将在实际设置 city 之前被调用。

您可以在 city 上添加 watcher，这样对数据属性的任何更新都会导致 getWeatherInfo():

export default {
  watch: {
    city() {
      this.getWeatherInfo()
    }
  }
}

如何在页面加载前从 API 获取数据到动态 API URL（空值问题）

How to fetch data from API to a dynamic API URL before page loads (empty value problem)

javascript

apollo

vue.js

graphql

nuxt.js