使用Nuxt.js时如何在前端进行异步请求？

Question

我是 Vue 和 Nuxt 的新手，我有一个关于异步请求的问题。我了解到，通过在 Nuxt 中使用 asyncData 和 axios 我可以获取数据，然后可以在前端呈现这些数据。然而现在的问题是应用程序会等到数据被获取后才会显示任何内容。

那么我怎样才能确保应用程序呈现某些东西，然后在前端运行异步请求（就像 Vue 使用 created 生命周期方法所做的那样）但同时也在服务器端。

Answer 1

正如您所提到的，Nuxt 将首先完成您放入 asyncData 的任何异步调用。完成此操作后，它将开始呈现您的视图，在此上下文中呈现意味着它将简单地用 html 替换第一个视图上的组件树。所有这些都发生在您的服务器上，用户甚至看不到这些。

页面交付给客户端后，已经 pre-rendered 包含您在 asyncData 上获取的数据，如果您不希望发生这种情况，请不要使用asyncData 方法来获取数据。

您想要在客户端获取的所有内容，基本上只需按照 here.

所述放入 vue mounted 挂钩

所以总结一下：asyncData 内的调用将在呈现之前完成，并且在交付时已经显示在用户浏览器中。 mounted 中的每个调用都将在客户端正常完成。