在继续请求的同时呈现加载程序页面

Question

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

我的意思是：

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

有没有办法做到这一点。

Answer 1

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

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

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

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

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

Answer 2

我看到您正在使用服务器端呈现，returns html 将在服务器本身上显示。

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

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

解决方案：

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

Render a loader page while continuing the request