asyncData 中出现意外的 setTimeout (nuxt/no-timing-in-fetch-data)

Question

我正在尝试运行来自我的 pages/posts/index.vue 页面的代码。但我不断收到一条错误消息：异步数据中出现意外的 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

预计 asyncData 将直接 return 数据，并且该数据将合并到组件（页面）中 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/'
      }
    ]
  }
},

您 return 来自 asyncData 的对象，然后可以使用组件方法中其他地方的 this.loadedPosts 或 HTML 模板中的双花括号访问您的数据，例如 <div>{{ loadedPosts }}</div>.

如果您需要从 API 中获取数据，您可以 await API 响应的结果。 Nuxt 文档对此有更多详细信息： https://nuxtjs.org/docs/2.x/features/data-fetching/

Answer 2

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

},

asyncData 中出现意外的 setTimeout (nuxt/no-timing-in-fetch-data)

Unexpected setTimeout in asyncData (nuxt/no-timing-in-fetch-data)

javascript

vue.js

nuxt.js

nuxtjs