无法使用 Nuxt 组件中的 axios 从 api 获取数据

Question

<template>
  <div id="post">
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: ''
    }
  },
  async asyncData({$axios}) {
    const res = await $axios.get('/v1/posts')
    .catch( error => {
      console.log("response error", error)
      return false
    })
    return {
      data: res
    }
  },
}
</script>

起初，我尝试用上面的代码获取数据，它在 pages/post.vue 中有效，但在 components/post.vue 中无效。然后，我意识到我不能在nuxt组件中使用asyncData并更改代码如下。

<template>
  <div id="post">
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: ''
    }
  },
  mounted () {
    this.asyncData()
  },
  asyncData() {
    await axios.get('/v1/posts')
    .then(res => {
      this.data = res.data
    })
  },
}
</script>

然后，我收到语法错误“意外的保留字 'await'”。如何在 Nuxt 组件中通过 api 获取数据？

===================================

我阅读了 https://nuxtjs.org/docs/features/data-fetching#accessing-the-fetch-state 并更改了如下代码。

<script>
export default {
  data () {
    return {
      data: ''
    }
  },
  async fetch() {
    this.data = await fetch('/v1/posts')
    .then(res => res.json())
  },
}
</script>

现在，我正在处理另一个错误 'Error in fetch(): SyntaxError: Unexpected token < in JSON at position 0'。

Answer 1

此代码有效。

<script>
export default {
  data () {
    return {
      data: '',
    }
  },
  async fetch() {
    const res = await this.$axios.get('/v1/posts')
    this.data = res.data
  },
}
</script>

Answer 2

很高兴找到了解决您的问题的方法。

如果你不想在后面写 .data，你甚至可以直接使用 this.$axios.$get。

无法使用 Nuxt 组件中的 axios 从 api 获取数据

Can't get data from api with axios in Nuxt components

axios

nuxt.js

laravel-api

asyncdata