Vue.js VueJs异步Api数据最佳实践

我正在NuxtJs中构建一个headless SPA SSR，我想知道什么是确保应用程序只在与远程API建立连接时加载的最佳实践

这是当前我的index.vue组件：

{{site.meta.title}
从“../classes/api/General/Meta”导入元
导出默认值{
数据（）{
返回{
meta:null
}
},
创建（）{
Meta.getMeta（）.then（（响应）=>{
this.meta=response.data
})
}
}

这有时会解决

site.meta.title

未定义的问题，因为该站点在api数据初始化之前加载。是的，

site.meta.title

是在api的引擎盖下定义的。所以我想的下一步是像下面的脚本一样使用异步：

从“../classes/api/General/Meta”导入元
导出默认值{
数据（）{
返回{
meta:null
}
},
异步创建（）{
等待Meta.getMeta（）。然后（（响应）=>{
this.meta=response.data
console.log（response.data.site.logo）
})
}
}

尽管这没有任何帮助

---

但是使用

v-if=“meta”

确实有帮助。尽管如此：现在Axios似乎不再呈现代码（ssr）中的内容了。

console.log

在异步调试tbh时，您不能100%信任它。

console.log（JSON.parse（JSON.stringify（））

可以提供更多帮助，但有时它仍然有一些缺点

至于最佳实践，创建前的

和创建后的
都在两侧（服务器+客户端）运行，因此可以使用它们。您还可以使用
asyncData
和新的
fetch
（它是一个Nuxt钩子，而不是实际的钩子）

注意不要正确使用
async/await
语法（此处不需要
then
）：

async created（）{
const response=wait Meta.getMeta（）
this.meta=response.data
console.log（this.meta）
}

而且，如果使用适当的
异步/await
，这种情况实际上永远不会发生

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

您可以在此处阅读有关Nuxt生命周期的更多信息：

我建议通常使用
async fetch（）
方法（非阻塞，很好的助手），或者
async async data（）
如果需要阻塞方法。中间件还可以使应用程序的整个过程更加灵活

您可以在此处获得
fetch
与
asyncData
之间差异的完整解释：

如果您想了解如何在真实场景中使用
fetch
，可以阅读以下示例：
console.log
对于异步调试tbh，您不能100%信任它。

console.log（JSON.parse（JSON.stringify（））
可以提供更多帮助，但有时它仍然有一些缺点

至于最佳实践，创建前的
和创建后的
都在两侧（服务器+客户端）运行，因此可以使用它们。您还可以使用
asyncData
和新的
fetch
（它是一个Nuxt钩子，而不是实际的钩子）

注意不要正确使用
async/await
语法（此处不需要
then
）：

async created（）{
const response=wait Meta.getMeta（）
this.meta=response.data
console.log（this.meta）
}

而且，如果使用适当的
异步/await
，这种情况实际上永远不会发生

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

您可以在此处阅读有关Nuxt生命周期的更多信息：

我建议通常使用
async fetch（）
方法（非阻塞，很好的助手），或者
async async data（）
如果需要阻塞方法。中间件还可以使应用程序的整个过程更加灵活

您可以在此处获得
fetch
与
asyncData
之间差异的完整解释：

如果你想有一个关于如何在真实场景中使用
获取
的例子，你可以阅读以下内容：
所以，事实证明我的理解是完全错误的。
在最新的nuxt版本中，现在包含了异步获取方法（内置）

这样，所有渲染等都可以正常工作。
现在，我结束的工作代码如下所示：


导出默认值{
异步获取（）{
this.meta=等待获取(
'https://testurl.com/meta'
).then（res=>res.json（））
},
数据（）{
返回{
meta:null
}
}
}

fetch的美妙之处在于，您可以添加侦听器“如下所示：

获取站点
发生错误
即使等待时间较长，此内容仍将呈现在服务器端


我之所以发布这篇文章，是因为我最初的问题有点没有解释清楚，希望能帮助其他人

编辑：
我已经标记了kissu作为答案（在我创建这篇文章之后，确实看到了这篇文章），因为它被解释得非常好，而且做得很好！
谢谢：-）
所以，事实证明我完全弄错了。
在最新的nuxt版本中，现在包含了异步获取方法（内置）

这样，所有渲染等都可以正常工作。
现在，我结束的工作代码如下所示：


导出默认值{
异步获取（）{
this.meta=等待获取(
'https://testurl.com/meta'
).then（res=>res.json（））
},
数据（）{
返回{
meta:null
}
}
}

fetch的美妙之处在于，您可以添加侦听器“如下所示：

获取站点
发生错误
即使等待时间较长，此内容仍将呈现在服务器端


我只是在发帖