Javascript asyncData中意外的setTimeout(获取数据中的nuxt/无计时)
我正在尝试从我的页面/posts/index.vue页面运行代码。但我一直收到一条错误消息,上面说:“asyncData中意外的setTimeout”。我不知道那是什么意思。有人能帮忙吗?我还需要其他插件吗Javascript asyncData中意外的setTimeout(获取数据中的nuxt/无计时),javascript,vue.js,nuxt.js,nuxtjs,Javascript,Vue.js,Nuxt.js,Nuxtjs,我正在尝试从我的页面/posts/index.vue页面运行代码。但我一直收到一条错误消息,上面说:“asyncData中意外的setTimeout”。我不知道那是什么意思。有人能帮忙吗?我还需要其他插件吗 <template> <div class="postspage"> <section class="introduction"> </section> <PostList :
<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 () {}
}
从“@/components/Posts/PostList”导入PostList
导出默认值{
中间件:“日志”,
组成部分:{
帖子列表
},
异步数据(上下文、回调){
设置超时(()=>{
回调(null{
装载的邮件:[
{
id:“Post1”,
标题:“第一篇文章”,
previewText:“这是1号帖子”,
缩略图:'https://www.pexels.com/video/5899816/'
},
{
id:‘Post2’,
标题:“第二篇文章”,
previewText:“此帖子编号2”,
缩略图:'https://www.pexels.com/video/5899816/'
}
]
})
}, 1500)
},
已创建(){}
}
预计异步数据
将直接返回数据,该数据将合并到组件(页面)数据
。您不需要设置计时器或调用回调。试着这样做:
async异步数据(){
返回{
装载的邮件:[
{
id:“Post1”,
标题:“第一篇文章”,
previewText:“这是1号帖子”,
缩略图:'https://www.pexels.com/video/5899816/'
},
{
id:‘Post2’,
标题:“第二篇文章”,
previewText:“此帖子编号2”,
缩略图:'https://www.pexels.com/video/5899816/'
}
]
}
},
从asyncData
返回一个对象,然后可以使用组件方法中的this.loadedPosts
或HTML模板中的双花括号(如{{loadedPosts}
)访问数据
如果需要从API获取该数据,可以等待API响应的结果。Nuxt文档对此有更多详细信息:
谢谢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)
},