在继续请求的同时呈现加载器页面答案

【问题标题】：Render a loader page while continuing the request在继续请求的同时呈现加载器页面
【发布时间】：2019-07-12 09:25:22
【问题描述】：

我目前正在开发一个使用 nodejs 和 ejs 以及 shopify api 的应用程序。我想知道是否有一种方法可以在请求完成时在屏幕上呈现微调器/加载器。

我的意思是这样的：

app.get('/', (req, res) => {
  res.render('loader');
  // continue the api authentication
});

有什么办法可以做到。

【问题讨论】：

标签： javascript node.js shopify shopify-app

【解决方案1】：

我看到您正在使用服务器端渲染，它返回要在服务器本身上显示的 html。

仅在已加载的 UI 上才可能显示微调器，其中后续请求仅获取数据并将其插入回您的 UI。因为您已经加载了页面您可以开始和停止在屏幕上显示加载程序。

如果您尝试在您的请求中完全加载一个新页面，这是不可能的。

解决方案：

1) 使用 SPA 架构。 2）从您的节点服务器返回从服务器编译的 html 作为对 ajax 请求的响应，并自己将其插入到 UI 中，这样您就有一个已经加载的页面，您可以在其中显示微调器。您必须在服务器本身上获取已编译的 html，并将 html 作为编码字符串发送回，在 UI 上将其解码并插入。

【讨论】：

【解决方案2】：

只要您调用 res.render() ，请求就会完成。

首先，如果您不使用 xhr、fetch、axios 等，则不能使用后端代码来动态更改前端内容。

因此，在您的用例中，您可以使用 DOM fetch api 或您想要的任何库在“/”路由处发出 GET 请求。代码可能如下所示。

const getData = async () => {
   showloader()
   const data = await fetch('/).then(res => res.json())
   hideLoader()
}

在后端只需执行认证逻辑并返回认证状态，在客户端收到数据后，您可以担心相应地处理 DOM。

【讨论】：