Question

我似乎没有从Axios异步调用中获取任何数据。我已经在Nuxt配置中设置了呼叫，如下所示：

modules: [
  '@nuxtjs/axios',
],

在我的组件中是这样的：

<template>
    <div>
        {{audioUrls}}
        {{ip}}
    </div>
</template>

<script>
export default {
    name: "Audio",
    data() {
        return {
            audioUrls: null,
        }
    },
    async asyncData({ $axios }) {
        const ip = await $axios.get('http://icanhazip.com')
        return { ip }
    },
    mounted() {
        this.audioUrls = this.asyncData()
    }
}
</script>

我没有收到任何错误或数据通过我的应用程序。我想念什么吗？

Answer 1

您错误地使用了$axios.get()的返回值（即Response对象）：

// ❌ DON'T DO THIS: $axios.get() returns a Response,
// whose data prop contains actual response data
const ip = await $axios.get(...)
return { ip }

// ✅ OK
const { data: ip } = await $axios.get(...)
return { ip }

似乎您正在尝试在组件中使用asyncData()，但尝试使用components don't have asyncData()。您可以将asyncData()移动到页面中（例如pages/index.vue）；或者改用fetch()，它也可以在组件中使用。不要忘记在ip中声明data()：

// MyComponent.vue
export default {
  data() {
    return {
      ip: '',
    }
  },
  async fetch() {
    const { data } = await this.$axios.get('http://icanhazip.com')
    this.ip = data
  }
}

使用Axios模块设置Nuxt项目

1 个答案: