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

Posted 2023-02-23

【中文标题】无法在 Nuxt 组件中使用 axios 从 api 获取数据

【英文标题】：Can't get data from api with axios in Nuxt components

【发布时间】：2021-12-15 02:53:48

【问题描述】：

<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>

现在，我遇到了另一个错误“fetch() 中的错误：SyntaxError: Unexpected token

【参考方案1】：

此代码有效。

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

</script>

【参考方案2】：

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

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