使用 Axios 模块设置 Nuxt 项目答案

【问题标题】：Setting up Nuxt project with Axios module使用 Axios 模块设置 Nuxt 项目
【发布时间】：2020-10-10 17:46:30
【问题描述】：

我似乎没有从我的 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>

我的应用没有收到任何错误或数据。我错过了什么吗？

【问题讨论】：

你等待你的功能了吗？
适用于哪个功能？
你到底在用你得到的价值做什么？有什么模板可以展示吗？
<template> <div> {{audioUrls}} {{ip}} </div> </template> <script> export default { name: "Audio", data() { return { audioUrls: null, } }, async asyncData({ $axios }) { const ip = await this.$axios.$get('http://icanhazip.com') return { ip } }, mounted() { const ip = this.$axios.$get('http://icanhazip.com') this.audioUrls = ip } }
@raina77ow 到目前为止它是一个非常简单的组件，只是试图让数据显示出来

标签： javascript vue.js axios nuxt.js

【解决方案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()，它也适用于组件。不要忘记在data() 中声明ip：

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

【讨论】：