Question

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

我的意思是：

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

有什么可能的方法。

Answer 1

一旦您调用res.render（），请求将完成。

首先，如果您未使用xhr，fetch，axios等，则无法使用后端上的代码动态更改前端上的内容。

因此，在您的用例中，您可以做的是，使用DOM提取API或所需的任何库在“ /”路由处执行GET请求。代码可能如下所示。

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

在后端，只需执行身份验证逻辑并发送回身份验证状态，客户端接收到数据后，您就可以担心相应地处理DOM。

Answer 2

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

仅在已加载的UI上显示微调框，其中后续请求仅获取数据并将其重新插入UI中。当您已经加载页面您可以开始和停止在屏幕上显示加载程序。

如果您试图在请求中完全加载新页面，则将不可能。

解决方案：

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