使用Axios模块设置Nuxt项目

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()，但组件没有asyncData()。您可以将asyncData()移动到页面中(例如，pages/index.vue(；或者使用同样在组件中工作的fetch()。不要忘记在data():中声明ip

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