我在Nuxt中有一个动态页面,在那里我使用Fetch和Axios来获取我需要的所有数据,比如照片/文本。我的问题是API相当长(超过3800行)。
页面加载时,在11秒内什么也没有出现,所以我想知道是否可以不等待获取调用结束,而在另一个继续加载的同时出现第一个结果。
我尝试链接获取调用没有成功。我希望有人能指导我的解决方案。
这是我的收获:
async fetch() {
let path = this.$nuxt.context.route.path
this.response = await axios.get(
`/api${path}`,
{
headers: {
'X-AUTH-TOKEN': process.env.SECURE_TOKEN,
'Content-Type': 'application/json'
}}
).then((res) => {
this.models = res.data.content;
})
},
fetchOnServer: true,
1条答案
按热度按时间rdlzhqv91#
最后,您将不需要获取所有文件。
分页仍然是要走的路,因为加载3800个元素在一个网页上是不是要走的路,如果你只显示10个甚至100个(将太沉重,以处理JS明智的,没有任何用处)。
有一些方法可以通过一些高级模式来实现这一点,但这里仍然完全不需要。
你应该做的是在API上寻找一些分页,如果它不可用,我仍然建议你提前做,而不是在客户端。
此外,使用一些无限滚动是一个很好的主意,在每次迭代中为10个元素分页。
我的previous answers中提供了一些关于如何实现的解决方案。
否则,这里有一些有用的软件包。