带有 Axios 的 Nuxt 在页面加载时不会从 API 获取数据

Posted 2023-03-25

【中文标题】带有 Axios 的 Nuxt 在页面加载时不会从 API 获取数据

【英文标题】：Nuxt with Axios dont get data from API on page load

【发布时间】：2021-02-16 02:20:41

【问题描述】：

我正在尝试使用 NUXT 中的 axios 将数据加载到我的页面中，但加载时没有直接出现我必须删除我的代码中的某些内容并将其保存以查看 axios 获取的数据。在页面刷新时，axios 也没有加载任何内容。

这是我在页面中使用的代码：

<script>
import axios from 'axios'
 export default 
  layout: 'women', 
  name: '#app',
  data: 
    results: []
  ,
mounted() 
      axios.get("########")
    .then(response => this.results = response.data.content)
  ,

</script>



<b-row id="app"  class="wrapper-wm" v-for="result in results" :key="result">
    
        <b-col  sm class="wmgrd"><b-img :src="result.cover"  fluid></b-img></b-col>
         
</b-row>

希望有人能帮我找出原因吗？ 谢谢

【参考方案1】：

看起来您需要等待响应在您的mounted() 方法中返回，然后才能呈现模板。你可以使用async/await。

async mounted() 
      await axios.get("########")
    .then(response => this.results = response.data.content)
  ,

有很多关于 async/await 和 javascript 承诺的信息。

附带说明一下，nuxt 提供了asyncData 方法，可让您在页面加载之前获取页面所需的数据。

import axios from ‘axios’
export default 
  asyncData() 
    const  data  = await axios.get("########")
    return data
  

现在您可以在组件中访问data。

Nuxt asyncData

【讨论】：

感谢您的帮助...现在运行良好 :)