为什么 axios 请求在 vuejs（nuxt.js）方法中不起作用答案

【问题标题】：Why axios request not working inside vuejs (nuxt.js) methods为什么 axios 请求在 vuejs（nuxt.js）方法中不起作用
【发布时间】：2019-06-19 09:40:25
【问题描述】：

我已经在我的 nuxt.js 应用程序中安装了 axios。这里是我的配置文件代码：

文件：nuxt.config.js

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

axios: {
  // proxyHeaders: false
}

这是我的示例工作代码：

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

这里是我不工作的代码：

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

为什么里面methodsaxios 请求不起作用？

【问题讨论】：

你什么时候调用这个方法？

标签： javascript vue.js vuejs2 axios nuxt.js

【解决方案1】：

你不能在你的方法对象中调用 asyncData。 asyncData 仅用于预渲染。

将您的函数重命名为其他名称，应该没问题：

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

此外，当您在上面的示例中使用 asyncData 时，您不应在数据函数中初始化“ip”。无论如何，从 asyncData 返回的内容都会合并到数据中。

【讨论】：

【解决方案2】：

每次加载页面前都会调用AsyncData方法，另外请注意，asyncdata仅在nuxt的页面组件中可用。您无法通过 asyncData 中的 this 访问组件实例，因为它是在启动组件之前调用的。您可以在模板中使用从 asyncData 数据返回的数据，而无需在数据中进行初始化。

Nuxt asyncData

【讨论】：