VueJs异步Api数据最佳实践

Question

我正在NuxtJs中构建一个无头SPA SSR，我想知道什么是确保应用程序仅在连接已建立到远程API时才加载的最佳实践。

这是我当前的索引。vue组件:

<template>
<div class="wrapper">
<div class="content">
<div class="title">
<h1>{{site.meta.title}}</h1>
</div>
</div>
</div>
</template>
<script>
import Meta from '../classes/api/General/Meta'
export default {
data () {
return {
meta: null
}
},
created () {
Meta.getMeta().then((response) => {
this.meta = response.data
})
}
}
</script>

这有时会解决site.meta.title未定义的问题，因为站点在api数据初始化之前正在加载。是的，site.meta.title是在api的底层定义的。所以。下一步，我想使用async像下面的脚本:

<script>
import Meta from '../classes/api/General/Meta'
export default {
data () {
return {
meta: null
}
},
async created () {
await Meta.getMeta().then((response) => {
this.meta = response.data
console.log(response.data.site.logo)
})
}
}
</script>

尽管这没什么用

但v-if="meta"确实有帮助。不过:现在Axios似乎不再渲染代码(ssr)中的内容了。

Answer 1

console.log并不是你可以100%信任的异步调试工具。
console.log(JSON.parse(JSON.stringify()))可以帮助更多，但有时仍然有一些缺点。

至于最佳实践，beforeCreate和created都在双方(服务器+客户端)上运行，所以使用它们是很好的。您还可以使用asyncData和新的fetch(它是next钩子，而不是实际的fetch API)。

注意正确使用async/await语法(这里不需要then):

async created() {
const response = await Meta.getMeta()
this.meta = response.data
console.log(this.meta)
}

同样，使用适当的async/await，这种情况实际上永远不会发生

因为站点在api数据初始化之前正在加载

您可以在这里阅读更多关于next生命周期的信息:https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle

我建议通常去async fetch()方式(非阻塞，很好的助手)，或async asyncData()，如果你需要一个阻塞方法。中间件还可以使整个过程更灵活地围绕您的应用程序。

您可以在这里获得fetch与asyncData之间差异的完整解释:https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/

如果你想有一个关于如何在现实世界中使用fetch的例子，你可以阅读这个:https://nuxtjs.org/blog/build-dev-to-clone-with-nuxt-new-fetch/

Answer 2

所以，事实证明，我得到了这个完全错误的方式。在最新的next版本中，现在包含了(内置的)异步获取方法。

有了这个，所有渲染等工作良好，如预期的。我的最终工作代码现在看起来像这样:

<script>
export default {
async fetch () {
this.meta = await fetch(
'https://testurl.com/meta'
).then(res => res.json())
},
data () {
return {
meta: null
}
}
}
</script>

fetch的好处在于，你可以添加监听器;像这样:

<p v-if="$fetchState.pending">Fetching site</p>
<p v-else-if="$fetchState.error">Error happened</p>
<p>This content will be rendered server side even though waiting time</p>

我只是发布这个，因为我原来的问题是有点错过解释，希望能帮助别人。

编辑:我把kissu标记为答案(在我创建这个之后确实看到了帖子)，因为它解释得很好，做得很好!谢谢:-)