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

【问题标题】：How to do asynchronous requests in frontend when using Nuxt.js?使用 Nuxt.js 时如何在前端执行异步请求？
【发布时间】：2018-09-07 08:43:04
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

在页面被交付给客户端之后，已经使用您在asyncData 上获取的数据进行了预渲染，如果您不希望这种情况发生，请不要使用asyncData 方法获取数据。

您想在客户端获取的所有内容，基本上只需按照 here 的描述放入 vue mounted 挂钩。

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

【讨论】：

感谢您的回答。因此，我知道无法将预渲染代码（包括请求中的数据）交付给不支持异步 JavaScript 请求（例如 Google 机器人）的客户端，同时交付非预渲染代码给支持 JS 并在前端运行异步请求的客户端。
@phpheini 那么还有什么问题呢？我错过了什么吗？
我想要实现的是：Google bot --> 获取预渲染代码 ||启用 JavaScript 的用户 --> 获取没有预渲染数据的代码，数据将在前端异步获取
@phpheini 我很确定 nuxtjs 本身不可能做到这一点，因为您在之前的评论中所说的几乎总结了它。 Nuxt 不在乎你的客户是什么。另请注意，爬虫会执行同步 javascript，因此您无法摆脱在挂载钩子中删除获取的数据并为用户重新获取它。