asyncData 中的意外 setTimeout（nuxt/no-timing-in-fetch-data）

Question

我正在嘗試從我的 pages/posts/index.vue 頁面運行代碼。 但我不斷收到一條錯誤消息：asyncData 中的意外 setTimeout'。 我不知道那是什么意思。 有人可以幫忙嗎？ 我還需要其他插件嗎？

<template>
  <div class="postspage">
   <section class="introduction">
   </section>
   <PostList :posts="loadedPosts" />
  </div>
</template>

<script>
import PostList from '@/components/Posts/PostList'

export default {

middleware: 'log',

components: {
PostList
},

asyncData (context, callback) {
setTimeout(() => {
callback(null, {
  loadedPosts: [
    {
      id: 'Post1',
      title: '1st post',
      previewText: 'This is post number 1',
      thumbnail: 'https://www.pexels.com/video/5899816/'
    },
    {
      id: 'Post2',
      title: '2nd post',
      previewText: 'This post number 2',
      thumbnail: 'https://www.pexels.com/video/5899816/'
    }
  ]
  })
 }, 1500)
},

 created () {}

}

Answer 1

謝謝 Collin-Allen，我剛剛試過這個，它似乎也能工作（剛剛刪除了 setTimeout 函數：

asyncData (context, callback) {
callback(null, {
  loadedPosts: [
    {
      id: '1',
      title: 'First Post',
      previewText: 'This is my first post!',
      thumbnail: 'https://www.pexels.com/video/5899816/'
    },
    {
      id: '2',
      title: 'Second Post',
      previewText: 'This is my second post!',
      thumbnail: 'https://www.pexels.com/video/5899816/'
    }
  ]
}, 1500)

},

Answer 2

預計asyncData將直接返回數據，並將該數據合並到組件（頁面） data 。 您不需要設置計時器或調用回調。 嘗試這樣的事情：

async asyncData () {
  return {
    loadedPosts: [
      {
        id: 'Post1',
        title: '1st post',
        previewText: 'This is post number 1',
        thumbnail: 'https://www.pexels.com/video/5899816/'
      },
      {
        id: 'Post2',
        title: '2nd post',
        previewText: 'This post number 2',
        thumbnail: 'https://www.pexels.com/video/5899816/'
      }
    ]
  }
},

您從asyncData返回一個對象，然后可以在組件方法的其他地方使用this.loadedPosts訪問您的數據，或者在 HTML 模板（如<div>{{ loadedPosts }}</div>使用雙花​​括號訪問您的數據。

如果您需要從 API獲取該數據，您可以await API 響應的結果。 Nuxt 文檔對此有更多詳細信息： https ://nuxtjs.org/docs/2.x/features/data-fetching/