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

Question

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

那么如何确保应用呈现某些内容，然后在前端运行异步请求（就像Vue使用created生命周期方法一样）但同时也在服务器端呈现数据

Answer 1

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

之后，页面会被传递到客户端，已经使用您在asyncData上提取的数据进行预渲染，如果您不希望这样做，只需不要使用{{1获取数据的方法。

您想要在客户端获取的所有内容，基本上只是按照here所述进入vue asyncData挂钩。

总而言之：mounted内部的调用将在呈现之前完成，并且在发布时已经显示在用户浏览器中。 asyncData内的每个电话都会在客户端正常完成。